通过css修复布局
我在IE6中发现了一个布局错误，试图在我们的内容区域提供一些关于这个内容的线索，这样它就不会掉到导航菜单下面。很遗憾，虽然如果我可以重新设计整个页面，这可能比较容易修复，但我做不到.它是一个实时站点，托管了很多很多内容pages...and，它只在几个地方，比如IE6，在一些有点不寻常的情况下，circumstances...so冒着对内容持有者进行重大布局更改的风险是不合理的。
布局应该如下所示：
+-------+ +-------------------+
| Menu | | Content chunk 1 |
| | +-------------------+
| | +-------------------+
+-------+ | Content chunk 2 |
+-------------------+
Footer但是在IE 6中，它看起来像是：
+-------+
| Menu |
| |
| |
+-------+
+-------------------+
| Content chunk 1 |
+-------------------+
+-------------------+
| Content chunk 2 |
+-------------------+
Footer我一直在试图修复这个问题，并且正在研究一些建议的here引用，但是我希望css专家能够很容易地看到一些我不是的地方。
代码如下所示：
<!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样式语句并不理想。我没有编码他们，我只需要处理他们。
我没有多少运气，yet...but，我也知道css不是我的专长所在。
有什么建议吗？还是毫无希望？
编辑：，我对这个问题做了一些修改，试图改进clarity...hopefully，去掉一两次否决。非常感谢你们中已经做出回应的人.我现在就开始对这些答复进行评估。
回答 6
Stack Overflow用户
发布于 2009-02-13 18:27:25
我看不出用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";
}为了清晰起见，我使用I，但如果不能修改标记，则可以使用亲属获取元素。
Stack Overflow用户
发布于 2009-02-13 17:44:51
如果可以在另一个块级元素(如div标记)中包装违规表，则可以将该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像素以上。当然，这只在使表可滚动是您的客户端选项时才适用于您。不幸的是，你没有其他的选择。
Stack Overflow用户
发布于 2009-02-13 17:15:05
如果你不能到达565‘s 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上的硬编码样式，然后添加任何您想要留在那里的东西。很笨拙，但我希望你能明白。
https://stackoverflow.com/questions/546754
复制相似问题
腾讯云开发者
