温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS常见兼容性问题怎么解决

发布时间:2022-03-10 15:50:54 来源:亿速云 阅读:162 作者:iii 栏目:web开发

这篇文章主要介绍“CSS常见兼容性问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS常见兼容性问题怎么解决”文章能帮助大家解决问题。

  浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。

  这里谈到的浏览器,主要指IE6/IE7/IE...FireFoxChromeOperaSafari等。但更多的兼容还是考虑IE6/IE7/FF之间的斗争

  先来谈谈CSSHack

  我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做CSShack.

  CSShack主要有三种:IE条件注释法、CSS属性前缀法、选择器前缀法。

  (1)IE条件注释法,即在正常代码之外添加判别IE浏览器或对应版本的条件注释,符合条件的浏览器或者版本号才回执行里边的代码。

  <!--lt是小于gt是大于lte是小于等于gte是不小于!是不等于-->

  <!--[ifIE]>

  你想要执行的代码

  <![endif]-->

  <!--[ifltIE8]>

  你想要执行的代码

  <![endif]-->

  <!--[if!IE8]>

  你想要执行的代码

  <![endif]-->

  (2)CSS属性前缀法,即是给css的属性添加前缀。比如*可以被IE6/IE7识别,但_只能被IE6识别,IE6-IE10都可以识别"\9",IE6不能识别!importantFireFox不能识别*_\9

  可以先使用“\9"标记,将IE分离出来,再用”*"分离出IE6/IE7,最后可以用“_”分离出IE6

  .type{

  color:#111;/*all*/

  color:#222\9;/*IE*/

  *color:#333;/*IE6/IE7*/

  _color:#444;/*IE6*/

  }

  所以可以按着优先级就能给特定的版本捎上特定颜色

  可以先使用“\9"标记,将IE分离出来,再用”*"分离出IE6/IE7,最后可以用“_”分离出IE6

  .type{

  color:#111;/*all*/

  color:#222\9;/*IE*/

  *color:#333;/*IE6/IE7*/

  _color:#444;/*IE6*/

  }

  所以可以按着优先级就能给特定的版本捎上特定颜色

  为什么说一般呢...你看看下面这个例子,IE6貌似还认得出!important

  其实也能看出来了,当属性一起写在{}里头时,前者肯定会被后者覆盖。要使!important有效,就应置于多个{}间。

  h2{color:#f00!important;}

  h2{color:#000;}

  h3{color:#f00!important;color:#000;}

  <h2>test1</h2>

  <h3>test2</h3>

  说明:在标准模式中

  “-&Prime;减号是IE6专有的hack

  “\9&Prime;IE6/IE7/IE8/IE9/IE10都生效

  “\0&Prime;IE8/IE9/IE10都生效,是IE8/9/10的hack

  “\9\0&Prime;只对IE9/IE10生效,是IE9/10的hack

  (3)选择器前缀法,顾名思义,就是给选择器加上前缀。

  IE6可识别*p{color:red;}

  IE7可识别*+p{color:red;}

  @mediascreen\9{...}只对IE6/7生效

  @media\0screen{body{background:red;}}只对IE8有效

  @media\0screen\,screen\9{body{background:blue;}}只对IE6/7/8有效

  @mediascreen\0{body{background:green;}}只对IE8/9/10有效

  @mediascreenand(min-width:0\0){body{background:gray;}}只对IE9/10有效

  @mediascreenand(-ms-high-contrast:active),(-ms-high-contrast:none){body{background:orange;}}只对IE10有效等等

  再来看看主要的兼容问题:

  (1)最主要也是最常见的,就是浏览器对标签的默认支持不同,所以我们要统一,就要进行CSSreset.最简单的初始化方法是*{margin:0;padding:0;}但不推荐,而且它也并不完善。

  贴一个淘宝的样式初始化~

  body,h2,h3,h4,h5,h6,h7,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}

  body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}

  h2,h3,h4,h5,h6,h7{font-size:100%;}

  address,cite,dfn,em,var{font-style:normal;}

  code,kbd,pre,samp{font-family:couriernew,courier,monospace;}

  small{font-size:12px;}

  ul,ol{list-style:none;}

  a{text-decoration:none;}

  a:hover{text-decoration:underline;}

  sup{vertical-align:text-top;}

  sub{vertical-align:text-bottom;}

  legend{color:#000;}

  fieldset,img{border:0;}

  button,input,select,textarea{font-size:100%;}

  table{border-collapse:collapse;border-spacing:0;}

  (2)IE6双边距bug:块属性标签添加了浮动float之后,若在浮动方向上也有margin值,则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行

  <styletype="text/css">

  html,body,div{margin:0;padding:0;}

  .wrap{width:200px;height:200px;border:1pxsolid#333;}

  .box{float:left;/*display:inline*/;margin-left:10px;width:80px;height:80px;background-color:green;}

  </style>

  </head>

  <body>

  <divclass="wrap">

  <divclass="box"></div>

  <divclass="box"></div>

  </div>

  <scripttype="text/javascript">

  </script>

  </body>

  解决的方式有两个:

  1.给float元素添加display:inline即可正常显示

  2.就是hack处理了,对IE6进行_margin-left:5px;

  (3)跟上述差不多,也属于IE6双边距bug:行内属性标签,为了设置宽高,我们经常就会设置成display:block;这样一来就产生上述的问题。

  解决办法也是天津display:inline;但是这样一来我们就不能设置宽高了,所以呢需要再加个display:table.

  所以你设置display:block后,再添上display:inline和display:table

  (4)上下margin重合问题,相邻的两个pmargin-leftmargin-right不会重合,但相邻的margin-topmargin-bottom会重合。

  .box1{width:200px;height:200px;border:1pxsolid#333;}

  .mt{margin-top:10px;}

  .mb{margin-bottom:10px;}

  <divclass="box1mb"></div>

  <divclass="box1mt"></div>

  (5)有些浏览器解析img标签也有不同,img是行内的,一般都会紧接着排放,但是在有些情况下还是会突然出现个间距,解决办法是给它来个浮动float

  (6)标签属性min-height是不兼容的,所以使用的时候也要稍微改改。这样吧:

  .box{min-height:100px;height:auto!important;height:100px;overflow:visible;}

  (7)很多时候可能会纳闷超链接访问过后样式就混乱了,hover样式不出现了。其实主要是其CSS属性的排序问题。一般来说,最好按照这个顺序:L-V-H-A

  简单的记法是lovehat

  a:link{}a:visited{}a:hover{}a:active{}

  (8)chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性:

  -webkit-text-size-adjust:none;

  (9)png24位的图片在IE6下面会出现背景,所以最好还是使用png8格式的

  (10)因为存在两种盒子模式:IE盒子模式和W3C标准模式,所以对象的实际宽度也要注意。

  IE/Opera:对象的实际宽度=(margin-left)+width+(margin-right)

  Firefox/Mozilla:对象的实际宽度=(margin-left)+(border-left-width)+(padding-left)+width+(padding-right)+(border-right-width)+(margin-right)

  (11)鼠标的手势也有问题:FireFox的cursor属性不支持hand,但是支持pointer,IE两个都支持;所以为了兼容都用pointer

  (12)有个说法是:FireFox无法解析简写的padding属性设置。

  如padding5px4px3px1px;必须改为padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px。但我试了一下,发现还是可以解析的,难道是版本的原因?

  (13)消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效,padding属性对FireFox有效

  (14)CSS控制透明度问题:一般就直接opacity:0.6;IE就filter:alpha(opacity=60)

  但在IE6下又有问题,所以又得弄成filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

  (15)有些时候图片下方会出现一条间隙,通常会出现在FF和IE6下面比如

  <div><imgsrc="1.jpg"/></div>

  一般给img添加vertical-align属性即可,比如topmiddle

  img{verticle-align:center;}

  (16)IE6下p高度无法小于10px

  比如定义一条高2px的线条,FF和IE7都正常

  但IE6就是10px

  解决的办法有两种:添加overflow属性或设置fontsize大小为高度大小如:

  <divstyle="height:2px;overflow:hidden;background:#000000;width:778px;"></div>

  <divstyle="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>
CSS常见兼容性问题怎么解决

关于“CSS常见兼容性问题怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI