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

Liquid Layout IE Problems, of course (Newbie)

本文关键字：当然 新手 问题 布局 IE      更新时间：2023-09-26

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

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

问题 1：在 IE 中，与 Firefox 相比，2 个右侧边栏太宽了。其他一切看起来都很正常，只是那 2 个太宽了，这影响了布局问题 2：当窗口宽度低于 1024 时，它应该从容器 1.css切换到容器 2.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，所以我猜您只检查了最新版本？

按照建议添加一个文档类型，在IE9中你应该没问题，但是如果你也支持其他版本的IE，你将需要某种方式来独立地针对每个版本，因为它们都有不同和逐渐恶化的错误。有时，某些东西可以在IE7中工作，但不能在IE8中工作，但通常当您走向IE6时，您的问题会呈指数级增长，尤其是在液体布局中。

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

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

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

if (condition) {

或：

function something() {

而不是：

if (condition)
{

或：

function something()
{

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

window.onresize = windowSize();

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

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

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

有关怪癖模式的更多信息，请点击此处

相关文章：