|
阅读：9838回复：10
div的头疼！！到底怎么理解？
div+css，在ie和ff中经常出现不同的结果，我已经头晕，到底谁理解得对。
随便给个例子都不同： <style>
div#left {
float: left;
width: 150px;
height:100px;
background-color: red;
}
div#right {
background-color: lime;
float: right;
width: 150px;
}
div#middle {
background-color: silver;
width:100px;
}
</style>
<div id="left">left</div>
<div id="right">right</div>
<div id="middle">center</div>[/code] |
|
|
|
1楼#
发布于：2006-01-04 16:39
你这样写肯定出问题
|
|
|
2楼#
发布于：2006-01-04 16:39
|
|
|
3楼#
发布于：2006-01-04 16:39
为什么不用诸如
<div style="....">试试看呢，感觉你的做法效率不够。至于对错，等高人解答。 另外你说的不同，给截图出来看看? |
|
|
|
4楼#
发布于：2006-01-04 16:39
|
|
|
5楼#
发布于：2006-01-04 16:39
好像没有"float:middle"这样的方法,我能想到的就是那些top、left、right、bottom.
|
|
|
|
6楼#
发布于：2006-01-04 16:39
#middle定宽之后，横向宽度空余(100-150=-50)已经容不下#middle中的文字了，所以向y方向拓展，也就是Firefox里面的效果。
但是在IE里面，一旦给#middle设定宽度，就会触发IE的一个神奇属性(haslayout)从而引发出种种奇怪的bug，具体到这里就体现在#middle居然有了个左边距，大小就是#left的宽度（确切的说是宽度+3）。 所以设置#middle的宽度为100那么它会在left右面形成一个100px宽的block，而不是下方。 如果要达成统一效果，要么不设定宽度，如果一定要设定就用一些CSS hack吧针对IE做一些处理吧。 关于IE的haslayout，这篇文章不错，看看可能会理解更深刻一些： http://www.satzansatz.de/cssd/onhavinglayout.html 另外这个是一个三列布局的例子（来自w3cn）： http://www.w3cn.org/article/layout/2004/csslayout/threebox2.html |
|
|
7楼#
发布于：2006-01-04 16:39
|
|
|
|
8楼#
发布于：2006-01-04 16:39
|
|
|
9楼#
发布于：2006-01-04 16:39
old9 的这个解释有意思
#middle定宽之后，横向宽度空余(100-150=-50)已经容不下#middle中的文字了，所以向y方向拓展，... |
|
|
10楼#
发布于：2006-01-04 16:39
写两份吧
单独给IE写一份 !important 用这个写 比如： margin-right:5px !important; margin-right:2px 加上了“!important”的优先级就高，会优先加载这个样式，重要的是IE不认识，所有IE就读后面的那个，这样就解决了他们之间显示的差异问题。 |
|
