IE6表宽
IE6表宽
提问于 2012-05-12 09:21:15
本文档在IE6中有一些意想不到的布局( IE测试器中的测试)：
- ‘s左边与.albuminfo框左边
- 表之间的双边(在.albumvocal框中)
谁能帮助解决问题？如果您有另一种方法在.albumvocal框中设置表的100%宽度，请告诉我。
html
<body>
<div id="receptacle">
<div class="albuminfo">
<img alt="title" src="middle_special_329225.jpg" />
<p>album info</p>
<p>album info</p>
<p>album info</p>
<p>album info</p>
</div>
<div class="albumvocal">
<div style="width:100%">
<h2>album name</h2>
<table width="100%">
<thead>
<tr>
<th>vocal</th>
<th>artist</th>
<th>zone</th>
<th>style</th>
</tr>
</thead>
<tr>
<td>vocal1</td>
<td>artist1</td>
<td>zone1</td>
<td>style1</td>
</tr>
<tr>
<td>vocal2</td>
<td>artist2</td>
<td>zone2</td>
<td>style2</td>
</tr>
</table>
</div>
</div>
<div class="albumeaddinfo">
</div>
</div>
</body> #receptacle{
width:958px;
margin:0 auto;
border:1px solid #F00;}
.albuminfo img{
width:190px;
height:190px;}
.albuminfo{
text-align:center;
float:left;
padding:1.5em;
margin:2em 0 0 1%;
border:1px solid #00F;}
.albumvocal{
margin:2em 0 1em 30%;
padding:1em;
border:1px solid #F0F;}
.albumeaddinfo{
clear:both;}
table {
height:1%;
zoom:1;
width:100%;
border: solid 1px #e8eef4;
border-collapse: collapse;
}回答 1
Stack Overflow用户
发布于 2012-05-14 20:59:41
双边距问题几乎可以肯定是IE6著名的“浮动双边距”错误。
有关bug的详细讨论，请参见此处：http://www.positioniseverything.net/explorer/doubled-margin.html
这是一个众所周知的错误，您可以通过使用padding而不是margin或其他标记来解决这个问题，但是上面链接的页面还详细说明了一个“修复”方法，可以解决这个问题：
将display:inline添加到.albuminfo的样式中。
这是一个IE6黑客，通常情况下这是糟糕的代码，因为浮动元素不应该有display属性。但是它将解决IE6中的错误，不应该在其他浏览器中破坏您的代码(但是一定要测试它以确保！)，因为浮动元素总是显示为块，因此inline样式将被忽略。
表宽度的第二个问题我无法立即解决(我在这台机器上没有IE6，也不打算仅仅为此安装它)，但是我注意到表中同时有CSS width:100%和width="100%"属性。您不应该两者都需要，即使对于IE6，当然也不需要对任何其他浏览器；删除属性。
最后，您有完全支持IE6的特定要求吗？如果你这么做了，我会为你感到非常遗憾。但是如果没有，或者如果你可以用一个可以工作但看起来不太完美的网站，那么我建议你忽略这些问题。很少有人还在使用IE6，而那些使用它的人已经习惯了那些看上去垃圾的网站。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10562492
复制相关文章
相似问题
腾讯云开发者
