Liquid Layout IE 问题，当然（新手）答案

【问题标题】：Liquid Layout IE Problems, of course (Newbie)Liquid Layout IE 问题，当然（新手）
【发布时间】：2012-04-17 07:28:32
【问题描述】：

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

TL;DR：新布局在 IE 中不起作用，需要帮助（进行了研究）

问题 1：与 Firefox 相比，IE 中的 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 中解决这些问题的建议，我将不胜感激！也欢迎任何改进建议

【问题讨论】：

你没有使用文档类型，所以 IE 使用了错误的盒子模型（它在 quirksmode 中运行）。
另外，考虑使用 jQuery 而不是 vanilla javascript。 jQuery 帮助修复了很多与 IE 的不兼容以及其他跨浏览器问题

标签： javascript html css liquid-layout

【解决方案1】：

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

按照建议添加一个文档类型，您在 IE9 中应该没问题，但如果您也支持其他版本的 IE，您将需要某种方式来独立定位每个版本，因为它们都有不同且越来越严重的错误.有时，某些东西在 IE7 中会起作用，但在 IE8 中不起作用，但通常当您转向 IE6 时，您的问题会成倍增加，尤其是在流动布局的情况下。

我推荐使用Modernizr，它会根据使用的IE 版本为HTML 元素添加不同的类名。它还做了很多其他的事情，比如在旧的 IE 中也可以使 HTML5 元素样式化，所以它值得使用，即使没有它提供的任何其他功能测试。我可以看到你没有使用任何 HTML5 元素，但我不知道这是你的整个布局，还是只是它的开始......

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

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

if (condition) {

或：

function something() {

而不是：

if (condition)
{

或：

function something()
{

这在大多数情况下通常是可以的，但它会产生很难发现的错误，因此值得养成一直这样做的习惯。并且在附加事件监听器时，不需要指定new Function("function_name")，直接附加函数即可：

window.onresize = windowSize();

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

【讨论】：

【解决方案2】：

如果您复制并粘贴了整个内容，那么您缺少使 IE 以 quirksmode 呈现的文档类型。

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

More information on quirks mode can be found here

【讨论】：