日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

table自動(dòng)拉伸在chrome與IE中的兼容性問(wèn)題解決

云知道

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

table這個(gè)html中的元素很多人是不推薦用的，因?yàn)閠able有時(shí)候不好控制，一些內(nèi)容自動(dòng)非配td寬度以及內(nèi)容撐開(kāi)，邊的問(wèn)題有時(shí)候很讓人頭疼，如果你有此類問(wèn)題，歡迎與我交流，俗話說(shuō)，橫排用td，豎排用table，這句話確實(shí)沒(méi)有錯(cuò)，今天我主要說(shuō)的功能是table的自動(dòng)拉伸分配td寬度的時(shí)候在Chrome與IE下的區(qū)別 。

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

table自動(dòng)拉伸在chrome與IE中的兼容性問(wèn)題解決



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

另附上我的測(cè)試代碼：

復(fù)制代碼代碼如下:
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="/images/defaultpic.gif"/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="https://www.rkxy.com.cn/dnjc/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);

推薦閱讀