辰东全部小说,小说排行榜,玄幻小说

最近在做瀏覽器兼容，有個table自動拉伸的問題一直困擾著我，這個問題今天終于告一段落了，這篇文章我是極力推薦的，如果碰到這個問題的朋友，我相信你一定會感激我的，如果文章對你有幫助，請留言支持，也可以進行交流。

table這個html中的元素很多人是不推薦用的，因為table有時候不好控制，一些內容自動非配td寬度以及內容撐開，邊的問題有時候很讓人頭疼，如果你有此類問題，歡迎與我交流，俗話說，橫排用td，豎排用table，這句話確實沒有錯，今天我主要說的功能是table的自動拉伸分配td寬度的時候在Chrome與IE下的區別。

先對這個問題的瀏覽器進行分類，這個分類是我經過測試的：
A瀏覽器：table拉伸時保持td的比例不變，但是計算后的寬度【每個td寬度之和】與實際寬度【table寬度】可能不符：IE8、IE9、IE10、Firefox
B瀏覽器：table拉伸時保持td的比例可能改變，但是計算后的寬度【每個td寬度之和】與實際寬度【table寬度】一致：Chrome、Safari、IE7
詳細說明一些這兩種情況的區別，這種情況是在比較特殊的情況下產生的，如果table寬度是100px【border是0，padding和spacing都是0】，一共5個td，每個是20px，每次加減都是5的倍數，那么這兩個瀏覽器的解析是沒有區別的；但是如果你一次加3px，因為瀏覽器對元素計算寬高是不帶小數的【像素就是顯示器能識別的最小單位了】，那么這三個像素分配給table的5個td是如何分配的呢？這個具體是如何計算的應該問題IE和Chrome寫瀏覽器內核的工程師了，但是我們能夠從表現來分析他們的不同實現。A瀏覽器會根據比例來進行伸縮，舉個例子來說吧，看個圖片

19和21中間的那條紅線，如果拉伸之前是在整個圖片2/3的位置，那么拉伸之后紅線還是在2/3的位置；但是B瀏覽器你按照2/3的比例去計算就會差一些，具體差多少得看實際的數值了，那么是B瀏覽器我們如果想計算準確的紅線位置該如何計算呢，這里我提供一種辦法：看紅線是在第多少個td，如果說是第7個td那么拉伸之后計算前面六個td的寬度，加起來就是紅線的位置了，我的另外一種綁定td屬性的方法與這個方法實質上是一樣的，那是為什么呢，主要是因為B瀏覽器在拉伸td時保持所有的td之和與整個table的寬度一致的前提，這樣用每個td的寬度相加進行計算永遠是準確的。

另附上我的測試代碼：

復制代碼

上一篇：css實現點擊滾動翻頁的效果(無js)

下一篇：div+css用邊框實現圓角矩形(多樣式)