0

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

  1. .receptacle 的左边缘和 .albuminfo 框的左边缘之间的双倍边距
  2. 表格不自适应宽度（在 .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;
}
4

1 回答 1

0

双倍边距问题几乎可以肯定是 IE6 众所周知的“浮动时双倍边距”错误。

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

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

添加display:inline到.albuminfo.

这是一个 IE6 hack，实际上通常是糟糕的代码，因为浮动元素不应该有display属性。但它会解决 IE6 中的错误，并且不应该在其他浏览器中破坏您的代码（但一定要对其进行测试以确保！），因为浮动元素始终显示为块，因此inline样式将被忽略。

表格宽度的第二个问题我无法立即解决（我没有 IE6 可以在这台机器上使用，而且我不会为此安装它），但我注意到你有 CSSwidth:100%和width="100%"表上的属性。你不应该两者都需要，即使是 IE6，当然也不需要任何其他浏览器；放下属性。

最后，您有完全支持 IE6 的具体要求吗？如果你这样做了，那么我为你感到非常抱歉。但如果不是，或者如果您可以使用一个有效但看起来不太完美的网站，那么我建议忽略这些问题。很少有人还在使用 IE6，而且使用它的人已经习惯了看起来很垃圾的网站。

于 2012-05-14T20:59:41.710 回答