Question

我是一个真正的CSS初学者，所以请原谅我的无知。对于经验丰富的CSS人员来说，我一直在寻找一些显而易见的事情。

基本上，下面的CSS在FF / Chrome / IE8中显示为预期，但在IE6中没有显示（并且谁知道其他IE版本）。在IE6中，由于某些元素溢出浏览器窗口，因此不断显示friggin水平滚动条。我的阅读似乎表明这与填充有关，100％宽度是IE6的问题，或者其他......我添加了bg颜色以更好地可视化问题。

我真的只想＃ch / div（“head”）水平填充浏览器窗口。我想它归结为：为什么bs_ext和cd的div超出右侧浏览器窗口，导致水平滚动条显示？

<head>
<style>
<!--
body{margin:0px 0px 0px 0px}

#ch,#cs{position:relative;width:100%}
#ch{margin-top:0px;height:90px;background-color:#edeff4;border-bottom:1px solid 
#dddddd}
#cs{height:55px;width:1024px;border-bottom:1px solid #dddddd}
#cb{width:1024px}
#ci{float:left;width:200px;background-color:#efefef}
#cr{float:left;width:530px;background-color:#cccccc}
#cd{float:left;width:294px;background-color:#dddddd}

#bs{position:relative;float:left;top:18px;left:15px;width:185px;background-
color:#cccccc}
#bs_ext{position:relative;float:left;top:18px;left:15px;width:824px;background-
color:#dddddd}

-->
</style>
</head>
<body>
<div id=ch>head</div>
<div id=cs>
    <div id=bs><span>sssssss</span></div>
    <div id=bs_ext><span>ppppppp</span></div>
</div>
<div id=cb>
<div id=ci>111<br>111<br>111<br></div>
<div id=cr>222<br>222<br>222<br></div>
<div id=cd>333<br>333<br>333<br></div>
</div>
</body>

我很感激有关如何在IE6中完成这项工作的任何指示。

另外，我希望#cs的下边框始终是浏览器的100％（目前是1024px）。但是，如果我使用“100％”，那么在调整浏览器大小时会将“ppppppp”向下移动 - 我希望它能够被修复，以便调整浏览器大小不会改变内容位置。

非常感谢您提供任何指示/帮助

Answer 1

我不会尝试让我的网站与IE6兼容。

IE6已超过10年，您应该花时间使用较新的浏览器检查代码。

如果您坚持使其符合IE6标准，您应该考虑为不同的浏览器使用不同的样式表。

点击此链接：http://www.thesitewizard.com/css/excludecss.shtml

Answer 2

简短回答：

bs_ext宽度为824px，因此如果浏览器尺寸低于
cd位于距离左侧200 + 530px处，宽度为294px，这意味着它扩展到1024px，这太宽了（任何浏览器都使用窗口宽度的大约16个像素用于垂直滚动条）

此外：

按照bvd的建议去做;不要试图为IE6做太多优化
首先尝试在IE6和现代浏览器中构建网站。

解决方案：

以下CSS将删除页面html /正文上的所有滚动条。一个糟糕的解决方法，因为您正在销毁用户导航网站的工具：

html, body { overflow: hidden }

此外，如果你想要一个粘贴在页面底部的页脚（我不确定你是否这样做，但看起来那样），请尝试按照本教程进行操作：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

最后，如果您需要更多帮助，我建议您发布您想要实现的图片或设计。如果您知道如何解决浏览器的CSS缺陷，那么在IE6中可以实现很多功能。

最后一个提示是modernizr：http://www.modernizr.com/ Modernizr解决了很多IE6问题，但并非全部。此外，您的网站中将存在JavaScript依赖项，这将至少影响IE6和7用户。

祝你好运！

Answer 3

要删除滚动条，您可以将此属性赋予#CS {overflow：visible;}，它可能会修复IE6滚动条问题。

如BVD所述，你不应该在IE6中检查兼容性，你应该安装最新版本的IE，即IE9。 IE9提供了一个Developer Tool，它允许您检查html页面在IE7，IE8和IE9中的兼容性。你应该忽略IE6，并专注于从IE7版本开始的兼容性。要了解哪些浏览器受欢迎，请检查NetMarketShare

您用于Div的命名约定不正确，请查看本文，它可以帮助您理解我所说的css naming conventions。

CSS中的某些东西导致IE6中的水平滚动

3 个答案: