IE火狐兼容性问题

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

当面临需要只针对

IE7

做样式的时候就可以采用这个兼容。

IE6

及

IE6

以下识别

* html {…}

这个地方要特别注意很多地主都写了是

IE6

的兼容其实

IE5.x

同样可以识别这个兼容。其它

浏览器不识别。

html/**/ >body select {……}

这句与上一句的作用相同。

仅

IE6

不识别

select { display /*IE6

不识别

*/:none;}

这里主要是通过

CSS

注释分开一个属性与值，流释在冒号前。

仅

IE6

与

IE5

不识别

select/**/ { display /*IE6,IE5

不识别

*/:none;}

这里与上面一句不同的是在选择符与花括号之间多了一个

CSS

注释。

仅

IE5

不识别

select/*IE5

不识别

*/ { display:none;}

这一句是在上一句中去掉了属性区的注释。只有

IE5

不识别

盒模型解决方法

selct {width:IE5.x

宽度

; voice-family :""}""; voice-family:inherit; width:

正确宽度

;}

盒模型的清除方法不是通过

!important

来处理的。这点要明确。

清除浮动

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

在

Firefox

中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时

用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题

。

截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }

这个是在越出长度后会自行的截掉多出部分的文字，

并以省略号结尾，

很好的一个技术。

只

是目前

Firefox

并不支持。

只有

Opera

识别

@media all and (min-

width: 0px){ select {……} }

针对

Opera

浏览器做单独的设定。

以上都是写

CSS

中的一些兼容，建议遵循正确的标签嵌套

(div ul li

嵌套结构关系

)

，这样可

以减少你使用兼容的频率，

不要进入理解误区，

并不是一个页面就需要很多的兼容来保持多

浏览器兼容

)

，很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用

来解决局部的兼容性问题，

如果希望把兼容性的内容也分离出来，

不妨试一下下面的几种过

滤器。这些过滤器有的是写在

CSS

中通过过滤器导入特别的样式，也有的是写在

HTML

中

的通过条件来链接或是导入需要的补丁样式。

IE5.x

的过滤器，只有

IE5.x

可见

@media tty {

 

 

i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}

}/* */

IE5/MAC

的过滤器，一般用不着

/**//*/

@import "ie5mac.css";

/**/

下面是

IE

的条件注释，

个人觉得用条件注释调用相应

兼容是比较完美的多浏览器兼容的解

决办法。

把需要兼容的地方单独放到一个文件里面，

当浏览器版本符合的时候就可以调用那

个被兼容的样式，这样不仅使用起来非常方便，而且对于制作这个

CSS

本身来讲，可以更

严格的观察到是否有必要使用兼容，很多情况下，当我本人写

CSS

如果把全部代码包括兼

容都写到一个

CSS

文件的时候会很随意，

想怎么兼容就怎么兼容，

而你独立出来写的时候，

你就会不自觉的考虑是否有必要兼容，是先兼容

CSS

？还是先把主

CSS

里面的东西调整到

尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，

你是不是很

有成就感呢？你知道怎么选择了吧～～呵呵

IE

的

if

条件兼容

自己可以灵活使用参看这篇

IE

条件注释

Only IE

所有的

IE

可识别

只有

IE5.0

可以识别

Only IE 5.0+

IE5.0

包换

IE5.5

都可以识别

仅

IE6

可识别

Only IE 7/-

IE6

以及

IE6

以下的

IE5.x

都可识别

Only IE 7/-

仅

IE7

可识别

Css

当中有许多的东西不不按照某些规律来的话，

会让你很心烦，

虽然你可以通过很多的兼

容，很多的

!important

来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网

站，他们的

CSS

让

IE6,Ie7,Firefox,

甚至

Safari,Opera

运行起来完美无缺是不是很羡慕？而他

们看似复杂的模版下面使用的兼容

少得可怜。其实你要知道

IE

和

Firefox

并不不是那么

的不和谐，

我们找到一定的方法，

是完全可以让他们和谐共处的。

不要你认为发现了兼容的

办法，你就掌握了一切，我们并不是兼容的奴隶。

div ul li

的嵌套顺序

今天只讲一个规则。就是

<div><ul><li>

的三角关系。我的经验就是

<div>

在最外面，里面是

<ul>

，

然后再是

<li>

，

当然

<li>

里面又可以嵌套

<div>

什么的，

但是并不建议你嵌套很多东西。

当你符合这样的规则的时候，

那些倒霉的，

不听话的间隙就不会在里面出现了，

当你仅仅是

<div>

里面放

<li>

，而不用

<ul>

的时候，你会发现你的间隙十分难控制，一般情况下，

IE6

和

 

 

IE7

会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很

大一块，出现这种情况虽然你可以改变

IE

的

Margin

，然后调整

Firefox

下面的

Padding

，以

便使得两者显示起来得效果很相似，但是你得

CSS

将变得臭长无比，你不得不多考虑更多

可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。

具体嵌套写法

遵

循

上

面

得

嵌

套

方

式

，

<div><ul><li></li></ul></div>

然

后

在

CSS

里

面

告

诉

ul

{Margin:0px;Padding:0px;list-style:none;}

，其中

list-style:none

是不让

<li>

标记的最前方显示

圆点或者数字等目录类型的标记，

因为

IE

和

Firefox

显示出来默认效果有些不一样。

因此这

样不需要做任何手脚，

你的

IE6

、

和

IE7

、

Firefox

显示出来的东西

(

外距，

间距，高度，

宽度

)

就几乎没什么区别了，

也许细心的你会在某一个时刻发现一、

两个象素的差别，

但那已经很

完美了，不需要你通过调整大片的

CSS

来控制它们的显示了，你愿意，你可以仅仅兼容一

两个地方，

而且通常这种兼容可以适应各种地方，

不需要你重复在不同的地方调试不同的兼

容方式

–

减轻你的烦。你可以

ul.class1,

ul.class2,

ul.class3

{xxx:xxxx}

的方式方便的整理出你

要兼容的地方，而统一兼容。尝试一下吧，再也不要乱嵌套了，虽然在

Div+CSS

的方式下

你几乎可以想怎么嵌套就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍！

1.

超链接访问过后

hover

样式就不出现的问题

?

被点击访问过的超链接样式不在具有

hover

和

active

了

,

解决方法是改变

CSS

属性的排列顺序

: L-V-H-A

2.IE6

的双倍边距

BUG

例如

:

<style type="text/css">

body {margin:0}

div { float:left; margin-left:10px; width:200px; height:200px;

border:1px solid red }

</style>

浮动后本来外边距

10px,

但

IE

解释为

20px,

解决办法是加上

display:inline

3.

为什么

FF

下文本无法撑开容器的高度

?

标准浏览器中固定高度值的容器是不会象

IE6

里那样被撑开的

,

那我又想固

定高度，又想能被撑开需要怎样设置呢？办法就是去掉

he ight

设置

min-height:200px;

这里为了照顾不认识

min-height

的

IE6

可以这样定义：

 

 

div { height:auto!important; height:200px; min-height:200px; }

4.

为什么

web

标准中

IE

无法设置滚动条颜色了

?

原来样式设置：

<style type="text/css">

body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000; scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff; }

</style>

解决办法是将

body

换成

html

5.

为什么无法定义

1px

左右高度的容器

?

IE6

下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：

overflow:hidden | zoom:0.08 | line-height:1px

6.

怎么样才能让层显示在

FLASH

之上呢

?

解决的办法是给

FLASH

设置透明

:

<param name="wmode" value="transparent" />

7.

怎样使一个层垂直居中于浏览器中

?

<style type="text/css">

<!--

div {

position:absolute;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid red;

}

-->

</style>

这里使用百分比绝对定位，

与外补丁负值的方法，

负值的大小为其自身宽度

高度除以二

8

、

firefox

嵌套

div

标签的居中问题的解决方法

 

 

假定有如下情况：

<div id="a">

<div id="b"> </div>

</div>

如果要实现

b

在

a

中居中放置，一般只需用

CSS

设置

a

的

text-align

属性

为

center

。这样的方法在

IE

里看起来一切

正常；但是在

Firefox

中

b

却会是

居左的。

解决办法就是设置

b

的横向

margin

为

auto

。例如设置

b

的

CSS

样式为：

margin: 0 auto;

。