在firefox与IE下DIV+CSS Padding效果不同的解决方法
<div style="padding-top:5px;width:200px;height:15px;background-color:#ffeeee"> test </div>
以上代码在IE中和firefox会有不同的效果.最主要原因是firefox解释padding-top与IE的效果不同
fixfox对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,
要解决这一个矛盾,可以利用!important
padding-top:5px;
height:10px !important;
height:15px;
以上定义了两个height, 其中一个后面加了!important , IE将会忽略这个属性,而使用后面的height:15px; 而firefox却不会忽略这个属性, 直接使用height:10px
这样就可以很巧妙的解决这个问题
相关文档:
示例:此DIV为固定定位对象
要使HTML元件定位于浏览器的某个固定位置,而不随滚动条滚动,用以下CSS代码即可,跨各个主流浏览器: POSITION: fixed! important; TOP: 100px; _position: absolute; _top: 40; _left: 100。
示例见右边黄底红字块。 ......
例子:<span style="cursor:*">文本或其它页面元素</span> <a href="#" style="cursor:*">文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种:
下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧!
hand是手型
例子:CSS鼠标手型效果 <a ......
1.css在不同浏览器下显示效果不同
firefox和IE对某些css样式的认定有不少区别,包括:
· ul和ol的默认padding值是不一样的,在Firefox中, ......
IE6 IE7 IE8 Firefox Opera Google
范例
>
Y
Y
N
N
N
N
.type { >color: #F00; }
.
Y
Y
N
N
N
N
.type { .color: #F00; }
*
Y
Y
N
N
N
N
.type { *color: #F00; }
_
Y
N
N
N
N
N
.type { _color: #F00; }
!important
N
Y
Y
Y
......
.styleName{
color
:
#FFF
;
/* FF,OP,IE8 */
[
;
color:
#0F0
;
]
/* Sa,CH */
*
color
:
#FF0
;
/* IE7 */
_color:
#F00
;
/* IE6 */
}
.styleName{
background-color
:
#332200
;
/* FF*/
}
html*
.styleName{
background-color
:
#FF00FF
;
/* Sa IE7 CH */
}
*+
html .style ......