table全自动拉伸在chrome与IE中的适配性难题处理

日期:2021-01-20 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

近期在做访问器适配,有个table全自动拉伸的难题1直困扰着我,这个难题今日终究告1段落了,这篇文章内容我是竭力强烈推荐的,假如碰到这个难题的盆友,我坚信你1定会感谢我的,假如文章内容对你有协助,请留言适用,还可以开展沟通交流。

table这个html中的元素许多人是不强烈推荐用的,由于table有时不太好操纵,1些內容全自动非配td宽度和內容撑开,边的难题有时很令人头疼,假如你有此类难题,欢迎与我沟通交流,俗话说得好,横排用td,竖排用table,这句话的确沒有错,今日我关键说的作用是table的全自动拉伸分派td宽度的情况下在Chrome与IE下的差别。

先对这个难题的访问器开展归类,这个归类是我历经检测的
A访问器:table拉伸时维持td的占比不会改变,可是测算后的宽度【每一个td宽度之和】与具体宽度【table宽度】将会不符:IE8、IE9、IE10、Firefox
B访问器:table拉伸时维持td的占比将会更改,可是测算后的宽度【每一个td宽度之和】与具体宽度【table宽度】1致:Chrome、Safari、IE7
详尽表明1些这两种状况的差别,这类状况是在较为独特的状况下造成的,假如table宽度是100px【border是0,padding和spacing全是0】,1共5个td,每一个是20px,每次加减全是5的倍数,那末这两个访问器的分析是沒有差别的;可是假如你1次加3px,由于访问器对元素测算宽高是不带小数的【像素便是显示信息器能鉴别的最少企业了】,那末这3个像素分派给table的5个td是怎样分派的呢?这个实际是怎样测算的应当难题IE和Chrome写访问器核心的工程项目师了,可是大家可以从主要表现来剖析她们的不一样完成。A访问器会依据占比来开展伸缩,举个事例来讲吧,看个照片
 
19和21正中间的那条红线,假如拉伸以前是在全部照片2/3的部位,那末拉伸以后红线還是在2/3的部位;可是B访问器你依照2/3的占比去测算就会差1些,实际差是多少得看具体的标值了,那末是B访问器大家假如想测算精确的红线部位该怎样测算呢,这里我出示1种方法:看红线是在第是多少个td,假如说是第7个td那末拉伸以后测算前面6个td的宽度,加起来便是红线的部位了,我的此外1种关联td特性的方式与这个方式本质上是1样的,那是为何呢,关键是由于B访问器在拉伸td时维持全部的td之和与全部table的宽度1致的前提条件,这样用每一个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⑴.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>
上一篇:IE7一部分标识(span、input )设定text 返回下一篇:没有了