折叠的table行元素bug

来1个事例:编码很简易,以下:

拷贝编码
编码以下:

<table border="1">
<tr>
<td>dd</td>
<td>dds</td>
</tr>
<tr>
<td>ss</td>
<td>sss</td>
</tr>
</table>

这般,1个报表,有两行多列,在任何访问器下都沒有任何显示信息不正确.可是假如我加下面这句css,状况就不一样了:

拷贝编码
编码以下:

<style>
tr{position: relative;}
</style>

来看是要出难题了,但是别心急,实际上这个情况下从表层上你看不见任何难题,网页页面合理布局肯定不容易乱掉,
你看不见任何物品会重合起来.

我可几乎沒有想过要耍大伙儿,尽管表层上看不见难题,可是如今让大家的ie develop tool上场吧,它会告知大家layout带来了甚么

留意两幅图中的不一样和同样.留意左侧主视图中的蓝色线框圈起来的物品,这个tool的功效便是右侧点一下某个元素会在网页页面选用线框框起来.
但是留意,我两次各自点一下了两个不一样的元素.而线框框起来的是同1个地区,我汗,我没看错吧.
是的,也便是说两个tr重合了,但是怪异的是tr里的元素3D渲染都彻底正确,不危害到任何外型款式.不必认为这样是安全性的,隐患在此时埋下.
我实际上是在做1个仿真模拟对话框的情况下遇到这个难题的,我用了1个两行的table,第1行做对话框题目栏,能够拖拽,第2行做正视图,但是后来我发现table的第2行把第1行盖住了,尽管表面看上去很一切正常,可是题目栏却由于被挡住不能以点一下和拖拽了.
要修补这个状况,去掉tr中的position便可
3.由此说来:
不知道道大伙儿写css的情况下是否用1些reset来先reset下,总之我是这样做的,我的NetBeans里的css模版里就存着reset,每一个css文档头顶部都会有这样1段:

拷贝编码
编码以下:

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 12px;
vertical-align: baseline;
background: transparent;

}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
/* 元素得到聚焦点时的款式! */
:focus {
outline: 0;
}
/* 独特文字的款式! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* 细线报表款式 */
table {
border-collapse: collapse;
border-spacing: 0;
}

大伙儿都了解要肯定精准定位1个元素的话,最先要使它的父元素精准定位,比如设定1个position:relative,这模样元素才能够absolute,随后top,left精准定位.

因而我就想,这样太不便了,我果断给全部的元素都设定position:relative算了吧,随后要肯定精准定位的改1下position:absolute.这样以防挨个设定了,立即全部元素都可以以肯定精准定位了.

因而本文所说的难题来了,大家给全部元素都设定了position:relative,因而table出难题了,因此说这类做法是不能取的,并且这样会引发1些别的的3D渲染难题,记得我在好几个地区都看到提醒说不可以这样设定.

本文实际上是想说layout的,但是这个难题确实是ie的bug,并不是layout难题,下一次等我再遇到layout难题再说layout吧.顺带说1下,这简直1个怪异的bug.