Question

我是CSS的新手，之前从未创建过布局，而且我在Internet Explorer中遇到了第一个问题。我认为它在Firefox中看起来不错。在开始布局之前，我已经做了很多关于HTML和CSS的阅读，所以我知道IE有一些错误，但即使在进行布局和研究问题之后，似乎没有任何解决方案可行。我希望有人在这里可以提供帮助。

TL; DR：新的布局不在IE中工作，需要帮助（做过研究）

问题1：在IE中，与Firefox相比，2个右侧边栏太宽。其他一切看似正常，只有那两个太宽，影响了布局问题2：当窗口宽度低于1024时，应该从container1.css切换到container2.css，有效地改变容器属性以更好地以较小的分辨率显示。在Firefox中运行良好，但在IE中它似乎删除了容器周期，使内容在整个窗口中流动。

<HTML>
<HEAD>
<TITLE>My Liquid Layout</TITLE>
<link rel="stylesheet" type="text/css" href="LiquidLayout.css" />
<link id="container1" rel="stylesheet" type="text/css" href="container1.css" />
<link id="container2"  rel="alternate" type="text/css" href="container2.css" />

<script type="text/javascript">
<!--    

var css = "container1";
function changeStyle(styleSheet)
{
if(styleSheet == css)
    return;
var selected = document.getElementById(styleSheet);
var current = document.getElementById(css);
if(!selected)
{
    selected = current.cloneNode(true);
    selected.id=styleSheet;
    selected.setAttribute("href",current.getAttribute("href").replace(new
   RegExp(css),styleSheet));
}
    current.setAttribute("rel","stylesheet1");
    selected.setAttribute("rel","stylesheet");
    document.getElementsByTagName('head')[0].appendChild(selected);
    css = styleSheet;
    }

function windowSize()
{
var windowWidth;
var windowHeight;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;

if (document.body && document.body.offsetWidth)
{
    windowWidth = document.body.offsetWidth;
    windowHeight = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) 
{
    windowWidth = document.documentElement.offsetWidth;
    windowHeight = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) 
{
    windowWidth = window.innerWidth;
    windowHeight= window.innerHeight;
}

if(windowWidth < 1024)
changeStyle('container2');
else if(windowWidth >= 1024)
changeStyle('container1');
}

window.onresize = new Function("windowSize()");
//-->   

</script>   

</HEAD>
<BODY>
<div id = "container">
<div id = "header"><p id = "size"></p></div>
<div id = "content">
    <div id = "menu">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Video</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">IGN</a></li>
        </ul>
    </div>
    <div id = "sidebox"></div>
    <div class = "column" id = "sidebar"></div>
    <div class = "column" id = "main"></div>    
</div>
<div id = "footer"></div>
</div>

</BODY>
</HTML>

主要的CSS是：

body 
{
background-color:gray;
margin: 0px;
text-align: center;
}

#header
{
width: 100%;
height: 200px;
background-color: yellow;

}

#content
{
padding-top:5px;
padding-bottom:0px;
padding-right:5px;
padding-left:5px;
min-height: 768px;
}

#menu
{
width: 66%;
height: 250px;
background-color: blue;
float: left;
}

#sidebox
{
width: 34%;
height: 250px;
background-color: red;
float: right;
display: inline;
}

#sidebar
{
width: 34%;
background-color: red;
height: 100%;
float: right;
}

#main
{
width: 65%;
height: 100%;
background-color: green;
float: left;
}

如果有人可以请求在IE中解决这些问题的一些建议我会很感激！我们也欢迎任何改进建议

Answer 1

您没有指定哪个版本的IE，所以我猜您只检查了最新版本？

按照建议添加doctype，你应该在IE9中没问题，但是如果你支持其他版本的IE，你也会想要一些独立定位每个版本的方法，因为它们都有不同的，并且逐渐恶化的bug 。偶尔会有一些东西可以在IE7中运行，但不会在IE8中运行，但一般情况下，当你向IE6迈进时，你的问题会成倍增长，尤其是液体布局。

我建议使用Modernizr，这将根据所使用的IE版本为HTML元素添加不同的类名。它还做了许多其他的东西，比如在旧版IE中制作HTML5元素也是如此，所以即使没有提供任何其他功能测试，也值得使用。我可以看到你没有使用任何HTML5元素，但我不知道这是你的整个布局，还是只是它的开头......

您可能还想使用Selectivizr，以便最有用的CSS3功能也可以在IE8及更低版本中使用，尽管您需要使用JS库，例如jQuery，因此它可能或者可能没用。您的CSS中没有任何CSS3，但同样，您的示例可能会更加简化

就代码的改进而言，您不需要在脚本标记<!--中包含HTML注释，并且自IE4之类的日子开始就没有。此外，出于性能原因，您应该放在<body>的底部（就在结束</body>之前），而不是<head>，如果您使用HTML5文档类型（您在即使您不打算使用任何HTML5元素，仍然可以使用）您不需要在<script>元素上指定类型属性。在JavaScript中，左大括号应与函数定义或条件位于同一行，所以：

if (condition) {

或：

function something() {

而不是：

if (condition)
{

或：

function something()
{

这通常在大多数情况下都可以，但它可能会产生很难发现的错误，所以有必要养成一直这样做的习惯。当附加事件监听器时，您不需要指定new Function("function_name")，您可以直接附加该功能：

window.onresize = windowSize();

此外，在CSS中，零值不需要指定度量单位，因此您可以只使用0而不是0px ...

Answer 2

如果你复制并粘贴了整数，那么你错过了一个doctype，让你在quirksmode中渲染IE。

我建议将HTML5文档类型添加到文档的顶部<!DOCTYPE html>

More information on quirks mode can be found here

液体布局IE问题，当然（新手）

2 个答案: