液体布局IE问题，当然（新手）
[英]Liquid Layout IE Problems, of course (Newbie)
问题描述
我是CSS的新手，以前从未创建过布局，并且Internet Explorer中的第一个布局存在一些问题。 我认为它在Firefox中看起来不错。 在开始布局之前，我已经阅读了很多有关HTML和CSS的文章，因此我知道IE有一些错误，但是即使在进行了布局并研究了这些问题之后，这些解决方案似乎都无法正常工作。 我希望这里有人可以提供帮助。
TL; DR：新版式不适用于IE，需要帮助（已进行研究）
问题1：在IE中，右侧2个工具栏与Firefox相比太宽。 其他所有内容似乎正常，只是那两个太宽了，这会影响布局问题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中这些问题的建议，我将不胜感激！ 也欢迎任何改进建议
2 个解决方案
解决方案1
0 2012-04-17 07:51:37
您没有指定IE的版本，所以我猜您只检查了最新版本？
根据建议添加一个doctype，您在IE9中应该没问题，但是如果您还支持其他版本的IE，则您将需要一些独立定位每个版本的方法，因为它们都有不同的漏洞，并且会逐渐恶化。 有时，某些功能在IE7中有效，但在IE8中无效，但是通常在您使用IE6时，您的问题将成倍增加，尤其是在采用液体布局的情况下。
我建议使用Modernizr ，这将根据使用的IE版本向HTML元素添加不同的类名。 它还完成了许多其他工作，例如使HTML5元素也可以在较旧的IE中设置样式，因此即使没有它提供的任何其他功能测试，也值得使用。 我可以看到您没有使用任何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 ...
解决方案2
0 2012-04-17 09:13:11
在 Javascript 中加载液体的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.