为什么不同浏览器以不同方式呈现相同的HTML？
17 html jquery rendering mozilla internet-explorer-8
这是一个html页面:
<html>
<head>
<title>
Frame Set
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="frame.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
var winSize = $(window).width();
var margin = (winSize-1000)/2;;
$('#main').css({'margin-left':margin,'margin-right':margin});
}
)
$(function() {
$(".frame").each(function() {
var width = ($(this).find('.h').width()),
height = $(this).find('.l').height(),
pad = $(this).find('.h').position().left,
actWidth = width + 10,
nHeight = height - (height * 2),
rLeftMargin = actWidth - 1,
bWidth = actWidth;
$(this).find('.r').css({'margin-top':nHeight, 'margin-left':rLeftMargin, 'height':height});
$(this).find('.h').css({'height':25});
$(this).find('.b').css({'width':bWidth, 'margin-top':0});
});
});
</script>
</head>
<body>
<div id="main" align="center" style="width:1000px; height:100%; text-align:left;">
<div id="inner1" style="width:100%; height:20%; float:top; margin-bottom: 20px;">
<div id="inner11">
<div class="frame">
<div class="h" style="width:100%">Header</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
<div id="inner2" style="width:100%; height:60%;">
<div id="inner21" style="width:69%; float:left; margin-left: 1px; margin-right: 1px;">
<div class="frame">
<div class="h" style="width:100%">Left Frame</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
<div id="inner22" style="width:29%; float:right; margin-left: 1px; margin-right: 1px;">
<div class="frame">
<div class="h" style="width:100%">Right Frame</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
<div id="inner3" style="width:100%; height:20%; float:bottom; margin: 2px 2px 2px 2px;">
<div id="inner23">
<div class="frame">
<div class="h" style="width:100%">Footer</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
</div>
</body>
</html>
这是Mozilla输出:
这是IE8输出:
问题是什么 ？
Yi *_*ang 112
如何修复此页面
让我们帮助你一点......
使用Doctype
请参阅@ Topera的回答
使一切中心对齐
请不要使用
var winSize = $(window).width();
var margin = (winSize-1000)/2;;
$('#main').css({'margin-left':margin,'margin-right':margin});
}
而是使用CSS属性margin: 0 auto.根据经验,在可能的情况下,始终使用CSS解决方案而不是Javascript.
创建相等高度的列
请参阅:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
使用正确的术语和更好的类名
为避免混淆,请不要将非框架元素称为框架.有关帧的更多信息,请参阅:http://reference.sitepoint.com/html/elements-frames-windows
给你的班级有意义的名字.这样做的原因是其他任何语言一样-所以,当你回来以后三个一个月后,你会不会在命名类被抓你的头l,r和h.
使用语义上有效的HTML
将align和text-align属性正式弃用; 请参阅上面关于使事物居中对齐的解决方案,text-align而不是CSS属性.
HTML元素赋予意义,以它们被包裹在内容您为每个"框架"应该被标记的标头.<h2>或<h3>标题来代替-而divs为没有意义的通用块级元素,将h1要h6设置的元素(对于想一个更好的词)告诉浏览器它们中包含的文本是标题.
CSS Box模型
请看一下框模型和浮点数在CSS中的工作原理.bottom并且top不是CSS float属性的有效值.
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels
http://reference.sitepoint.com/css/boxmodel
http://www.smashingmagazine .COM/2007/05/01/CSS-浮动理论-事情-你-应知/
真正的问题在这里
不适用于浏览器.令人惊讶的是,IE8比其前辈的行为少得多.尝试编写更好的HTML和CSS.
Top*_*era 23
你错过了标签<!DOCTYPE>,在第一行.
例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
如果你不把它,IE将激活quirks mode,并将发生非常奇怪的事情.当浏览器激活怪异模式时,很多东西都会改变,就像盒子模型一样.
注意:许多浏览器都有怪癖模式,不仅仅是IE(我知道firefox也有).
更多关于怪癖模式.
doctypes列表.
- @Sarang:Doctype使浏览器尽可能准确地呈现页面,就像那种类型的文档一样.如果它使事情变得"小",那是因为它们被写成小东西. (4认同)
Dav*_*and 17
问题是并非所有浏览器都使用相同的渲染引擎或渲染规则.对于Web开发人员来说,这是一个不断的悲痛源泉,而且它似乎不会很快消失.
尽可能使用CSS,因为在严格的样式表规则下,浏览器往往最符合要求.除此之外,祝你好运,欢迎来到网络开发:)
在我使用的时候使用doctype:list - > XHTML 1.0 Strict,XHTML 1.1,HTML5(如果你不熟悉可能发生的问题,请不要使用
使用重置:eric meyers重置为xample是一个很好的
使用clearfix(并知道何时使用它),例如Jeff Starr 的新clearfix
使用这三件事,它是一个良好的开端,让您的网站在所有浏览器中看起来都一样.之后,您必须了解自定义浏览器错误,如双边距错误等.
| 归档时间： |
|
| 查看次数： |
6257 次 |
| 最近记录： |