Question

我有一个在IE6中出现的布局错误，并且我正试图想出一个方法来在我们的内容区域中提供这些内容的一些线索，以便它不会在下面下拉导航菜单。可悲的是，如果我可以重新设计整个页面，这可能相对容易修复，我不能这样做......它是一个包含许多内容页面的实时网站......在IE6中，它只会在一些不寻常的情况下在几个地方中断...因此，为内容持有者承担重大布局变更的风险并不合理。

布局看起来应该是这样的：

+-------+ +-------------------+
| Menu  | | Content chunk 1   |
|       | +-------------------+
|       | +-------------------+
+-------+ | Content chunk 2   |
          +-------------------+
            Footer

但在IE 6中，它看起来像：

+-------+ 
| Menu  | 
|       | 
|       | 
+-------+ 
+-------------------+ 
| Content chunk 1   |
+-------------------+
+-------------------+ 
| Content chunk 2   |
+-------------------+
            Footer

我一直在努力解决这个问题并且正在通过一些建议here，但我希望css大师可以轻松地看到一些我不喜欢的亮点。 / p>

代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//Dtd Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="margin: 11px auto; width: 775px">

    <!-- Menu -->
    <div style="width:160px; float:left; clear:left; border:#999 1px dashed;">
        Menu Item 1<br />
        Menu Item 2<br />
    </div>

    <!-- Main content area -->
    <div style="position: relative; width: 565px; float: left; margin-right: -222px">

        <!-- I'm able to start modifying here. -->
        <!-- Content chunk 1 -->
        <table border="1">
            <tr>
                <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
                <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
                <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
                <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
                <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
            </tr>
        </table>

        <!-- I'd like to be able to stop modifying here. -->

        <!-- Content chunk 2 -->
        <table border="1">
            <tr>
                <td>This is data chunk 1</td>
                <td>This is data chunk 2</td>
                <td>This is data chunk 3</td>
                <td>This is data chunk 4</td>
                <td>This is data chunk 5</td>
            </tr>
        </table>

        <!-- I have to stop modifying here. -->

    <!-- Footer -->
    <div style="float: clear; text-align: center;">
        Here's a footer of some kind.  I don't want to be overlapped.
    </div>

</div>

</body>
</html>

顺便说一句，我知道内容区域周围区域的css样式语句并不理想。我没有对它们进行编码，我只需处理它们。

我还没有太多运气......但我也知道css 不我的专业知识所在。

连连呢？或者它没有希望了？

编辑：我已经对这个问题进行了一些修改，试图提高清晰度......希望能够摆脱一两个问题。非常感谢那些已经做出回应的人......我现在就开始对这些回复进行评估。

Answer 1

如果您可以将违规表包装在另一个块级元素（例如div标签）中，您可以将该样式设置为如下所示：

<div style="width: 100%; overflow: scroll;">
  <table border="1">
      <tr>
          <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
       </tr>
  </table>
</div>

这会将表格放入可滚动的窗口，因此它不会将div拉伸超过565像素。当然，如果使表格可滚动是您的客户的一个选项，这只适用于您。不幸的是，你没有很多其他选择。

Answer 2

我看不到任何方法只使用CSS来纠正这个问题。 IE6的包装计算将以这样的方式进行：除非扩展主内容区域，否则内容将在菜单下移动。我不知道这是否会在你的约束条件下工作，但是像这样的一些代码会在视觉上纠正它。

function resize_content ( )
{
     var main = document.getElementById ( "main" );
     var content = document.getElementById ( "content" );
     if ( main && content )
          main.style["width"] = ( content.clientWidth + 160 ) + "px";
}

为了清晰起见，我使用了ID，但如果你无法修改标记，你可以使用亲戚来获取元素。

Answer 3

如果你不能使用565px div，我会说它没用了，因为那就是没有把它自己定位在菜单中......

这是你可以用JS做的事情：

    <!-- I'm able to start modifying here. -->
    <script type="text/javascript">
    $(document).ready(function() {
        $('table#firstTable').parent().parent('div').removeAttr('style').attr('style', 'margin: 11px auto;');
        });
    </script>

首先，你摆脱了DIV上的硬编码风格，然后添加回你想留在那里的任何东西。非常笨拙，但我希望你明白这一点。

Answer 4

我知道这不是您正在寻找的解决方案，但可能的替代方案是更改文本本身并添加悬停以显示整个内容......例如：

＆lt; td＆gt;＆lt; span title =“这是数据块1，包含ALONGChunkThatDoes notDivideWell”＆gt;这是数据块1，带有...＆lt; / span＆gt;＆lt; / td＆gt;

Answer 5

根本没有你喜欢并且允许实施的解决方案。错误的DOCTYPE（“Dtd Xhtml”）将IE6抛入怪癖模式，从中无法返回。具体来说，在怪癖模式中，绝对没有办法强制IE6不“拉伸”元素，这会破坏你的浮动。如果你可以访问“主要内容”div，你可以使它在与浮动相同的“行”上出现（仍然拉伸），但除此之外，你只需要对内容进行处理，通过添加空格或<wbr> s：

<!-- this works, but would be hard to implement programmatically -->
<td>This is data chunk 1 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 2 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 3 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 4 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 5 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>

Answer 6

如果我理解正确，我认为您正在寻找类似于以下内容的内容：

<!DOCTYPE html PUBLIC "-//W3C//Dtd Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="margin: 11px auto; width: 775px; position: relative">

    <!-- Menu -->
    <div style="position: absolute; width:160px; left: 0; top: 0; border:#999 1px dashed;">
            Menu Item 1<br />
            Menu Item 2<br />
    </div>

    <!-- Main content area -->
    <div style="margin-left: 165px">

            <!-- I'm able to start modifying here. -->
            <!-- Content chunk 1 -->
            <table border="1">
                    <tr>
                            <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
                    </tr>
            </table>

            <!-- I'd like to be able to stop modifying here. -->

            <!-- Content chunk 2 -->
            <table border="1">
                    <tr>
                            <td>This is data chunk 1</td>
                            <td>This is data chunk 2</td>
                            <td>This is data chunk 3</td>
                            <td>This is data chunk 4</td>
                            <td>This is data chunk 5</td>
                    </tr>
            </table>

            <!-- I have to stop modifying here. -->

    <!-- Footer -->
    <div style="float: clear; text-align: center;">
            Here's a footer of some kind.  I don't want to be overlapped.
    </div>

</div>

</body>
</html>

上面的CSS执行以下操作：使外部div相对定位，这样您就可以使用菜单div并将其绝对放置在其左上角。然后，在内容的左侧放置165px的左边距。任何不适合内容空间的内容都应溢出到右侧。我没有任何方法可以在IE 6中进行测试，这适用于Safari，应该在Firefox中使用。

通过CSS修复布局

6 个答案: