武林網(www.49028c.com)文章簡介：不同CSS布局實現與文字鼠標選擇的可用性.

我們平時因為A原因或B原因，需要復制web頁面上的文字內容。常見的操作就是按住鼠標，選中要復制的文字區域，抬起鼠標按鍵，目標區域的文字就選中了。

不知你知不知道，有些看山去OK的CSS布局實際影響了頁面上文字復制的可用性。

這么說吧，假設你在微博上看見一個名為“屌絲逆襲”的標題，但是，由于孤陋寡聞，不知道這個標題啥意思，于是想百度之，最快的方式就是選擇→復制→搜索。結果，像中了邪，這幾個文字TMD就是選不準，老把旁邊的“蘿莉御姐”一起選中了；然后，這個標題又是鏈接，不能雙擊選擇！這么簡單的一件事搞得這么折騰，想必哥你泡妹子的心情都沒有了。

噢？你對這個假設表示懷疑。恩，看來我要拿點證據出來了。

正好我微博頁面開著，幾處點擊找一找，啊，很快就有了。您可以試試微博右側“換一換”幾個文字，你能輕松選中嗎？試試！

或是選中“設置分組”文字時，后面的些文字也莫名其妙一并帶上了，為何呢？

我們都知道，同一種布局的效果實現可以很很多很多中不同的實現方式。而這些不同的CSS布局實現方式就會影響到文字鼠標選擇的可用性問題。

舉個對于頁面重構人員很基本很簡單的例子，我們要實現左標題，右描述的布局。類似下截圖：

我們有一雙手都數不過來的實現，但是，不同的實現，CSS消耗，擴展性，可維護性，以及可用性也是不一樣的。這里，我們只討論文字選擇的可用性。

您可以狠狠地點擊這里：CSS布局與文字的鼠標選擇demo

進入demo，您會看到類似下圖的效果：

雖然多個列表長相一樣，但是卻都是使用不同的方式實現的。您可以試著用鼠標選擇各個列表左邊標題文字以及右邊的描述文字，就會看到，不同的CSS實現文字選擇的范圍，方向以及可選擇性都是有差異的。

例如（FireFox瀏覽器下，文字密密麻麻，可以不用看，直接跳過）：
第一列：左邊的標題無論是向左方向選中文字還是右方向，都很容易連后面的描述文字一起選中；而后面的描述文字，情況復雜，如果點擊位置有偏差，無法實現左→右的選中。如果點擊區域再文字的area box中，則從左到右的選中很好選中；而從右到左的選中很容易選不中。

總之，你記住下面的結論就可以了。

上面說了，文字的區域選擇與CSS之間的關系相當復雜，CSS屬性可以影響文字選擇范圍，方向，可選擇性等等。而且，可以影響的CSS屬性之多，如果沒有花很多功夫研究的話，是較難理透的。因此，本文所說的一些結論估計只是常見的一小部分。不過嘛，本文目的就是拋磚引玉。一是讓大家或多或少注意到這方面的可用性問題；二是讓大家曉得，盡量避免使用浮動布局，避免使用絕對定位布局。有空多研究研究流體布局(flow layout)，這可能是未來的王道啊！

行文匆忙，文中難免有表述不準確的地方歡迎指正。也歡迎各抒己見，內容補充，不甚感謝！