兼容模式下ie9和ie10显示样式在不兼容模式下为什么不加载css样式?

html-css014

兼容模式下ie9和ie10显示样式在不兼容模式下为什么不加载css样式?,第1张

这是因为IE自从IE9开始,会对网页的MIME类型进行验证,如果MIME类型不正确的话,就不会加载相应的样式表或者JS文件,这也是出于安全的考虑。\x0d\x0a造成IE9以上浏览器无法加载CSS样式表的,有几个可能的原因,一个可能是你的CSS样式引用的书写方式不正确,导致在IE9和IE10下面无法通过MIME的检查,如果是这个原因,在代码里面修改一下css样式引用的方法就行了。\x0d\x0a另外一个可能的原因,可能是你在电脑里面安装了代理软件或者其他什么与代理相关的软件,如wallproxy之类的,这一类软件可能会在打开本地HTML文件时修改mime类型,把type替换为stain之类,这个没有什么特别好的解决方法,要么卸载这些软件,要么重新安装一下试试。\x0d\x0a如果你是自己配置服务器后出现了这个问题,那么就可能是第三个原因了,在服务器端没有配置css的mime类型,这个对应的在IIS或者apache里面添加一下css的type就行了。

e浏览器从ie8开始添加了兼容模式,开启后会以低版本的ie进行渲染。兼容模式有可能会导致网页显示出问题,于是通常在html中添加下列代码来使

ie

使用固定的渲染模式:

代码如下:

<metahttp-equiv="x-ua-compatible"content="ie=8"><!--以ie8模式渲染-->

<metahttp-equiv="x-ua-compatible"content="ie=7"><!--以ie7模式渲染-->

有一种情况,在ie8下只有不使用兼容模式页面才能显示正常,但是如果设定为ie8的模式,在ie9中却会导致css3失效。看来,需要针对

ie8、ie9

分别

禁用兼容模式。怎么办呢?可以在后台判断浏览器版本,如果是ie8就输出content="ie=8",如果是ie9就输出

content="ie=9"。其实还可以单纯通过html来实现的,html代码如下:

<metahttp-equiv="x-ua-compatible"content="ie=9

ie=8

ie=7

ie=edge">

有两种方法:

1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。

例如:

padding: 20px !important/For Firefox/

padding: 10px/For IE/

(注意这里IE6是无法识别,important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)这个方法适用于修改少量代码。

2、条件注释。(只对IE浏览器有效)这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式,再在head中加入以下的代码以适应不同的IE浏览器版本调用:

注意:

gt: greater than (高于)

lte: less than or equal to (低于或等于)

另外:IE还支持一个非标准的标签:comment

This is not Internet Explorer.

This is Internet Explorer.

IE会自动把此标签中的内容当作注释处理掉。

扩展资料

关于css兼容性问题及一些常见问题

目前主流浏览器的兼容性做的都比较好了,以下主要针对IE6,7的不兼容问题进行解决。

1、有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。

解决方法:给对应的父级加overflow:hidden但是会有部分被隐藏掉,最好是精确计算宽高再设定。

2、在IE6下有元素浮动时,如果宽度需要由内容撑开,就给里边的块元素都加浮动,正常浏览器不用加浮动。

3、在IE6下元素的高度的小于19px的时候,会被当做19px来处理。

解决办法:添加overflow:hidden