Question

本文档在IE6中有一些意想不到的布局（IE测试中的测试）：

.receptacle的左边缘和.albuminfo框左边缘之间的双边距
表格不适应宽度（在.albumvocal框中）

谁可以帮助解决问题？如果你有另一种方法，设置表在.albumvocal框中有100％的宽度，请告诉我。

-------------------------------------- original 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;
}

Answer 1

双边距问题几乎肯定是IE6众所周知的“浮动双重保证金”错误。

有关错误的详细讨论，请参阅此处：http://www.positioniseverything.net/explorer/doubled-margin.html

这是一个众所周知的错误，您可以通过使用padding代替margin或其他标记来解决此问题，但上面链接的页面还详细说明了应该解决问题的“修复”问题：

将display:inline添加到.albuminfo的样式。

这是一个IE6 hack，一般来说实际上代码很差，因为浮动元素不应该有display属性。但它会解决IE6中的错误，并且不应该在其他浏览器中破坏你的代码（但要测试它以确保！），因为浮动元素总是显示为块，因此inline样式将被忽略。

表格宽度的第二个问题我无法立即帮助（我没有IE6交给这台机器，我不会为此安装它），但我注意到你们两个都有表格中的CSS width:100%和width="100%"属性。您不应该同时使用两者，即使对于IE6，也不一定要用于任何其他浏览器;删除属性。

最后，您是否有完全支持IE6的具体要求？如果你这样做，那我很抱歉。但如果没有，或者如果你可以逃脱一个有效但不完美的网站，那么我建议忽略这些问题。很少有人仍在使用IE6，那些使用IE6的人很习惯于看垃圾的网站。

IE6表宽

1 个答案: