table自動拉伸在chrome與IE中的兼容性問題解決
發(fā)布時間：2013-03-25 11:48:43 作者：佚名 
我要評論
我要評論table自動拉伸在做瀏覽器兼容時一直困擾著我，終于解決了，這篇文章我是極力推薦的,table有時候不好控制，一些內容自動非配td寬度以及內容撐開，邊的問題有時候很讓人頭疼，感興趣的各位可以參考下哈
最近在做瀏覽器兼容，有個table自動拉伸的問題一直困擾著我，這個問題今天終于告一段落了，這篇文章我是極力推薦的，如果碰到這個問題的朋友，我相信你一定會感激我的，如果文章對你有幫助，請留言支持，也可以進行交流。
table這個html中的元素很多人是不推薦用的，因為table有時候不好控制，一些內容自動非配td寬度以及內容撐開，邊的問題有時候很讓人頭疼，如果你有此類問題，歡迎與我交流，俗話說，橫排用td，豎排用table，這句話確實沒有錯，今天我主要說的功能是table的自動拉伸分配td寬度的時候在Chrome與IE下的區(qū)別。
先對這個問題的瀏覽器進行分類，這個分類是我經過測試的：
A瀏覽器：table拉伸時保持td的比例不變，但是計算后的寬度【每個td寬度之和】與實際寬度【table寬度】可能不符：IE8、IE9、IE10、Firefox
B瀏覽器：table拉伸時保持td的比例可能改變，但是計算后的寬度【每個td寬度之和】與實際寬度【table寬度】一致：Chrome、Safari、IE7
詳細說明一些這兩種情況的區(qū)別，這種情況是在比較特殊的情況下產生的，如果table寬度是100px【border是0，padding和spacing都是0】，一共5個td，每個是20px，每次加減都是5的倍數(shù)，那么這兩個瀏覽器的解析是沒有區(qū)別的；但是如果你一次加3px，因為瀏覽器對元素計算寬高是不帶小數(shù)的【像素就是顯示器能識別的最小單位了】，那么這三個像素分配給table的5個td是如何分配的呢？這個具體是如何計算的應該問題IE和Chrome寫瀏覽器內核的工程師了，但是我們能夠從表現(xiàn)來分析他們的不同實現(xiàn)。A瀏覽器會根據(jù)比例來進行伸縮，舉個例子來說吧，看個圖片
19和21中間的那條紅線，如果拉伸之前是在整個圖片2/3的位置，那么拉伸之后紅線還是在2/3的位置；但是B瀏覽器你按照2/3的比例去計算就會差一些，具體差多少得看實際的數(shù)值了，那么是B瀏覽器我們如果想計算準確的紅線位置該如何計算呢，這里我提供一種辦法：看紅線是在第多少個td，如果說是第7個td那么拉伸之后計算前面六個td的寬度，加起來就是紅線的位置了，我的另外一種綁定td屬性的方法與這個方法實質上是一樣的，那是為什么呢，主要是因為B瀏覽器在拉伸td時保持所有的td之和與整個table的寬度一致的前提，這樣用每個td的寬度相加進行計算永遠是準確的。
另附上我的測試代碼：
<SPAN style="FONT-SIZE: 18px"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div
{
height: 50px;
width: 300px;
border: 1px solid black;
}
div table
{
height: 100%;
width: 100%;
border: 0px solid black;
}
</style>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<table id="table1" cellpadding="0" cellspacing="0">
<tr>
<td id='td1' style="width: 60px">
</td>
<td style="width: 50px">
</td>
<td style="width: 40px">
</td>
<td style="width: 60px">
</td>
<td style="width: 50px">
</td>
<td style="width: 40px">
</td>
</tr>
</table>
</div>
<input id="Button1" type="button" value="button" style="width:100px;height:30px;position:absolute;left:20px;top:300px;" onclick="testTable()"/>
</form>
</body>
</html>
<script type="text/javascript">
$(function ()
{
});
function testTable()
{
$('#div1').width($('#div1').width() + 3);
var width = $('#td1').width();
//alert(width);
setTimeout(testWidth, 100);
}
function testWidth()
{
var width = 0;
var tds = $('#table1 tr td');
for (var i = 0; i < tds.length; i++)
{
var w1 = $(tds[i]).width();
width += w1;
}
alert(width);
}
</script>
</SPAN>
table這個html中的元素很多人是不推薦用的，因為table有時候不好控制，一些內容自動非配td寬度以及內容撐開，邊的問題有時候很讓人頭疼，如果你有此類問題，歡迎與我交流，俗話說，橫排用td，豎排用table，這句話確實沒有錯，今天我主要說的功能是table的自動拉伸分配td寬度的時候在Chrome與IE下的區(qū)別。
先對這個問題的瀏覽器進行分類，這個分類是我經過測試的：
A瀏覽器：table拉伸時保持td的比例不變，但是計算后的寬度【每個td寬度之和】與實際寬度【table寬度】可能不符：IE8、IE9、IE10、Firefox
B瀏覽器：table拉伸時保持td的比例可能改變，但是計算后的寬度【每個td寬度之和】與實際寬度【table寬度】一致：Chrome、Safari、IE7
詳細說明一些這兩種情況的區(qū)別，這種情況是在比較特殊的情況下產生的，如果table寬度是100px【border是0，padding和spacing都是0】，一共5個td，每個是20px，每次加減都是5的倍數(shù)，那么這兩個瀏覽器的解析是沒有區(qū)別的；但是如果你一次加3px，因為瀏覽器對元素計算寬高是不帶小數(shù)的【像素就是顯示器能識別的最小單位了】，那么這三個像素分配給table的5個td是如何分配的呢？這個具體是如何計算的應該問題IE和Chrome寫瀏覽器內核的工程師了，但是我們能夠從表現(xiàn)來分析他們的不同實現(xiàn)。A瀏覽器會根據(jù)比例來進行伸縮，舉個例子來說吧，看個圖片
19和21中間的那條紅線，如果拉伸之前是在整個圖片2/3的位置，那么拉伸之后紅線還是在2/3的位置；但是B瀏覽器你按照2/3的比例去計算就會差一些，具體差多少得看實際的數(shù)值了，那么是B瀏覽器我們如果想計算準確的紅線位置該如何計算呢，這里我提供一種辦法：看紅線是在第多少個td，如果說是第7個td那么拉伸之后計算前面六個td的寬度，加起來就是紅線的位置了，我的另外一種綁定td屬性的方法與這個方法實質上是一樣的，那是為什么呢，主要是因為B瀏覽器在拉伸td時保持所有的td之和與整個table的寬度一致的前提，這樣用每個td的寬度相加進行計算永遠是準確的。
另附上我的測試代碼：
復制代碼
代碼如下:<SPAN style="FONT-SIZE: 18px"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div
{
height: 50px;
width: 300px;
border: 1px solid black;
}
div table
{
height: 100%;
width: 100%;
border: 0px solid black;
}
</style>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<table id="table1" cellpadding="0" cellspacing="0">
<tr>
<td id='td1' style="width: 60px">
</td>
<td style="width: 50px">
</td>
<td style="width: 40px">
</td>
<td style="width: 60px">
</td>
<td style="width: 50px">
</td>
<td style="width: 40px">
</td>
</tr>
</table>
</div>
<input id="Button1" type="button" value="button" style="width:100px;height:30px;position:absolute;left:20px;top:300px;" onclick="testTable()"/>
</form>
</body>
</html>
<script type="text/javascript">
$(function ()
{
});
function testTable()
{
$('#div1').width($('#div1').width() + 3);
var width = $('#td1').width();
//alert(width);
setTimeout(testWidth, 100);
}
function testWidth()
{
var width = 0;
var tds = $('#table1 tr td');
for (var i = 0; i < tds.length; i++)
{
var w1 = $(tds[i]).width();
width += w1;
}
alert(width);
}
</script>
</SPAN>
相關文章
- 實現(xiàn)背景圖片拉伸的方法有很多，下面為大家詳細介紹下使用濾鏡來簡單實現(xiàn)，有需要的朋友可以參考下，希望對大家有所幫助2013-08-18
- 但是css3出現(xiàn)以后，這個重復顯示的情況被改善了。background-size 屬性可以讓我們之前的讓背景圖片拉伸填充的希望成真，具體使用方法如下感興趣的朋友可以參考下哈，希望對2013-07-11
CSS背景圖拉伸效果兼容FF/Chrome/IE等主流瀏覽器(親測)
按鈕作為DIV的背景圖來顯示，實際上有多個這樣的按鈕，而且DIV中的文字，也就是按鈕上要顯示的文字內容和個數(shù)都不定，這種情況下就需要用背景圖片拉伸效果來處理，感興趣的2013-04-24- 大家在寫按鈕（input、button）的時候會發(fā)現(xiàn)在 IE 下： 隨著字數(shù)的增多，兩邊的間距也會越來越大。 在 WIN 的XP 風格下，當字數(shù)很多時，兩邊還會出現(xiàn)嚴重的鋸齒。 到底2008-12-25
- 可在background屬性中設置所有的背景屬性，下面為大家詳細介紹下各個屬性的含義，初學者可以參考下，希望對大家學習css有所幫助2013-08-12
div背景定位background設置元素的背景參數(shù)
DIV背景定義參數(shù)：background 設置元素的背景參數(shù),div+css的廣泛使用，也改變了這一使用習慣，變成了將N多小圖標集于一個大圖上，再通過div來定位需要用到的圖片部分，大大2013-02-02對背景圖定位中background-position屬性的自我理解
最近在項目中需要大量的用到很多標簽按鈕什么的零碎圖片，加上一直沒機會使用Css中的”精靈技術“，這里把我對background-position的理解寫成文檔供更多人使用學習;如果有2013-01-15- 使用css3 屬性：background-size可以輕松實現(xiàn)像桌面壁紙一樣拉伸，下面為大家詳細介紹下具體的相關實現(xiàn)過程，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-19