0

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

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

问题 1：在 IE 中，与 Firefox 相比，2 个右侧边栏太宽了。其他一切看起来都很正常，只是那些 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 中解决这些问题的建议，我将不胜感激！也欢迎任何改进建议

4

2 回答 2

0

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

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

更多关于 quirks 模式的信息可以在这里找到

于 2012-04-17T09:13:11.973 回答
0

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

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

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

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

在对代码的改进方面，您不需要在脚本标签中包含 HTML 注释，<!--并且自从 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...

于 2012-04-17T07:51:37.473 回答