请教IE8兼容视图下CSS样式显示不正确问题

html-css07

请教IE8兼容视图下CSS样式显示不正确问题,第1张

第一个li的高度高了,所以后面float的元素就卡住了。

你可以直接在第一个li里面设置一下style="line-height:29px",就可以看出来效果了。

反正就是这个的原因。

至于怎么解决,没有找到问题产生的原因啊。。。。

------解决方案--------------------

.parameters li span

这个里面的字体大小影响的,

改为12px就可以解决这个问题。

至于为何这个字体会影响,估计是跟line-height在混杂模式下,浏览器的解释不同照成的吧。

总结性的影响因素,还说不上来。。。

用JQ试试。

代码如下

$("p").hover(function(){

$("p").css("background-color","yellow")

},function(){

$("p").css("background-color","pink")

})

width:192pxheight:55pxmargin-top:100pxbackground:url(images/anniu01.gif) no-repeat left bottom

要将上面的改成

width:192pxheight:155pxbackground:url(images/anniu01.gif) no-repeat left 50px

2.尽量用padding-top:,少用margin-top

今天总算升级到IE8了,感觉CSS的写法要想同时适应IE6、IE7、IE8、FireFox,有以下几个基本的窍门。

1、使用float后必须clear,否则IE8显示错误。

2、h1,h2,h3,ul,li,dl,dt,dd,p...最好定义margin:0和padding:0,否则各种浏览器显示有误差。

3、line-height值最好是偶数,奇数显示有误差。

4、input 的text和password两种形式在IE8不定义字体(宋体)下长度高度不一样,可将input定义为font-family:Arial。

5、如果想在标题前后加小图标,最好不要直接用img,用img的话IE6行间距会缩小,应该用<li>加背景的形式。

...今天暂时只发现这几点,更多的以后继续总结。

实在不行再用分开定义的办法:

div {

margin:0/* 给全部浏览器看 */

*margin:10px/* 给IE6、IE7看 */

_margin:20px/* 只给IE6看 */

}

附:基本CSS样式表

<style type="text/css">

body {

margin:0

font-size:9pt

line-height:18px

}

h1,h2,h3,ul,li,dl,dt,dd,p {

margin:0

padding:0

}

ul {

list-style:none

}

form {

margin:0

}

input,textarea,select {

font-family:Arial

font-size:9pt

}

.clear {

clear:both

}

</style>