您的位置：首页 > Web前端 > CSS

整理解决一些 DIV+CSS 应用中的问题

2009-08-02 22:29 447 查看

制作页面的过程中总是碰到div + css 浏览器兼容性问题,每次碰到问题都上网查资料,比较影响工作效率,今天下决心把这些知识都整理整理,以便提高工作效率.虽然网上有朋友整理过,但是还是希望自己能有深入的理解。

首先整理下各个浏览器之间的区别:

1.margin 加倍问题：　　

现象:对象设置float,并且设置了margin ,IE6下,边距为设置值的2倍,边距是对于父对象的边距,同级对象之间无此问题;

原因:IE6解析问题;

解决:设置对象display:inline;

例子:

<html xmlns="http://www.w3.org/1999/xhtml">

2<head>

3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

4<title>无标题文档</title>

5</style>

</head>

<body>

<div id="box">

<div id="content">此处显示 id "b" 的内
容</div>

</div>

</body>

</html>

2.div的垂直居中问题:

现象:div内容垂直居中设置无效

解决:vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行,事实上实现的原理就是一个div只有一行,每行高就是div的高,然后居中显示就ok了.
例子:
<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4<title>无标题文档</title>
5</style>
</head>
<body>
<div id="text">缺点是要控制内容不要换行</div>
</body>
</html>
3 IE 宽度和高度的问题
现象:IE不认识min-height 和 min-width 两个属性,但是IE是自动随内容扩展的,而FF是会将溢出内容隐藏;如果给对象设置min-height 和 min-width 等于没有设置高度和宽度.没有设置float:left 的情况下,设不设min-width没区别,但是min-height有作用,设置float:left以后min-width 有差别;
例子:
<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4<title>无标题文档</title>
5</style>
</head>
<body>
<div id="box">无hack情况左浮动</div>
<div id="box1">未浮动情况</div>
<div id="box2">hack下情况</div>
</body>
</html>说明:html>body: >是子选择符,用于匹配那些其他元素的直接后辈,属于CSS2。IE6不识别此选择符,故以设置FF达到相同效果;
4 页面的最小宽度现象:因为浏览器大小不同,经常要给网页设置最小宽度,以适应不同的浏览器,给body设置最小宽度min-width在FF里是起作用的,但是IE里没有效果;
解决:在IE下最外层加一个div,用JavaScript解决;
例子:
<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4<title>无标题文档</title>
5
6</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
说明:在页面内容为空的情况下(当然这种情况基本不可能出现,在实验过程中发现的),min-width是不起作用的.
width:expression(document.body.clientWidth <= 800? "800px": "auto" ); 不不加等号居然导致浏览器死掉崩溃,不明白原因;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航