CSS区分ie8和FF的方法?

html-css014

CSS区分ie8和FF的方法?,第1张

IE8现在还没有很好的解决兼容性的办法,但是IE8有一个方式是可以降低到IE7版本浏览。就是在每个以完成的页面源码中添加这句话:<meta

http-equiv="X-UA-Compatible"

content="IE=7"

/>

这样,我们做好的成品页面即使在IE8中测试不兼容,加上上面那段代码,就可以把IE8的兼容性视图降低至IE7,一切就正常啦!以下是css兼容IE6、IE7和FF的方法:

区分IE6,IE7,firefox

区别不同浏览器,CSS

hack写法:

区别IE6与FF:

background:orange*background:blue

区别IE6与IE7:

background:green

!importantbackground:blue

区别IE7与FF:

background:orange

*background:green

区别FF,IE7,IE6:

background:orange*background:green_background:blue

background:orange*background:green

!important*background:blue

注:IE都能识别*标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别

!important,

IE7能识别*,也能识别!important

FF不能识别*,但能识别!important

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>

要通过代码设置,C语言<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Demo</title> <style type="text/css">

#box { font-size: 4vw}</style></head><body> <div id="box">

我是靖鸣君 我是靖鸣君 我是靖鸣君</div></body></html>

但是该方案存在一个bug,上面的代码,当浏览器窗口变化的时候,box中的文字并没有按照应有的比例变化,但是css3标准中是这么说的:

When the height or width of the viewport is changed, they are scaled accordingly.