FireFox与IE兼容问题

摘要: 随着越来越多的人开始接受web标准,一些和以往有些不太一样的地方也让许多新手痛苦不堪。以前可能简单设置一下甚至不用设置就能实现的样式,现在却始终搞不定,本文列举了一些常见问题和解决方法,相信对新手很有帮助。

1.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A

Code:

一缕阳光*i'v;X*eo"`
v
<style. type="text/css">一缕阳光HVSi K:y
<!-- 一缕阳光*`*Z0x-dz@
a:link {}
\yA
h:bF_ _%M0a:visited {}一缕阳光-B8F(N)gW8`.~|e
a:hover {}
kjoL%m6g,D hq4oB0a:active {}
o;y0\{Y!a-h"{0-->
5XZ2i%ej3xY0</style>

一缕阳光:hMx&L4H
2.FireFox下如何使连续长字段自动换行

众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入&#10;的方法来解决

Code:

一缕阳光2s~G2jEDod
<style. type="text/css">
#T0H8j4mO+B.J't0<!--
)\HmZuYCy0div {一缕阳光qN)r|[
    width:300px;
4zX/msKV&c,y:F)S0    word-wrap:break-word;一缕阳光 ds!xlL\l qrr
    border:1px solid red;
5j+Q2bN;hx5H7T!Yy0}一缕阳光/v9iIZy1_s
-->一缕阳光G*b%Q~5}7ZUa|a
</style>

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<script. type="text/javascript">
1Xsn'PCR0/* <![CDATA[ */一缕阳光x'?3BS$HJ
function toBreakWord(el, intLen){
6ch9B(i+gq0    var bj=document.getElementById(el);
J/xj{%H4AkG0    var strContent=obj.innerHTML;  一缕阳光)rlx;je"i1t2t
s
    var strTemp="";一缕阳光b/jRm-Tt(z,f[ly
    while(strContent.length>intLen){
$P N7O6uUj^0        strTemp+=strContent.substr(0,intLen)+"&#10;";  一缕阳光uLtbPl%_xfN
        strContent=strContent.substr(intLen,strContent.length);  一缕阳光8xm8z$l9W MS
    }一缕阳光Ycx
^.SC
    strTemp+="&#10;"+strContent;一缕阳光Xd%HmXP Y9f
    obj.innerHTML=strTemp;
U$]$?.r)o r#mh0}
QN+x2UZ0if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);一缕阳光P*f2I.M/C"o'o1sD
/* ]]> */一缕阳光wF6h*JbE+z \
</script>

3.ff下为什么父容器的高度不能自适应

在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。

Code:

;^:R!|4jbA#TS0clear:both;

4.IE6的双倍边距BUG

浮动后本来外边距10px,但IE解释为20px,解决办法是加上

Code:

{ b2U`Z7I(b2VN0display:inline

5. IE6下绝对定位的容器内文本无法正常选择的问题

此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
[JpV ]U0ASPNETusStan.mspx?mfr=true

$BS&U/ql#RX06. IE6下为什么图片下方有空隙产生

解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom一缕阳光nC^XDmu.ZR8B
都可以解决.

O0Q/QU.}T4i07. IE6下两个层中间怎么有间隙

这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

E tyN@v5^/J08. list-style-image无法准确定位的问题

list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。

-k6V{)~!V7tR1e09. LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器

Code:

E1y%\&[#N0<style. type="text/css">一缕阳光 O/v|c:A h c
<!--
YuO3JM C+sM~0li {
q
t~^/B@&Y&M&?4j5?0    width:200px;
:^iRa)U:]/|!iUr8Op0    white-space:nowrap;一缕阳光GMGOC|h%W+V
    text-overflow:ellipsis; 一缕阳光|0u1yRxI8Q
    -o-text-overflow:ellipsis;
%Ao U.`#~4b0    overflow: hidden;一缕阳光
H-qlQzAZ9q^"A
    }

-->一缕阳光B~zJT
</style>

10.web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如 div id="aa"  不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

二.属性的优先级问题一缕阳光3ZaS8D'?A(rA
ID 的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

11.如何垂直居中文本

将元素高度和行高设为一致。

Code:

一缕阳光FAYKaTRr+Ml
<style. type="text/css">
5Wn"swhU0<!-- 一缕阳光5T"{)dRG2g_
div {一缕阳光Mh+HXVU\'Q
    height:30px;
;lZ&VeV0HCk0    line-height:30px;一缕阳光mZq+]x$R;it*t4n
    border:1px solid red
*J5v^yX1y&u0    }一缕阳光4P$Xp(i\6k b
-->一缕阳光%[ sc&RH_
</style>

12.如何对齐文本与文本输入框

加上 vertical-align:middle;

Code:

%g/\d8t}"}:So*{w0<style. type="text/css">
TZE)d/s"K`!?0<!--
:\0b$@T;\n$Jnj0input {
Z4I;p]@*w5C?+S0    width:200px;
8Ei F(@#P6Itu0    height:30px;一缕阳光hM
~(wwRJR
    border:1px solid red;一缕阳光(a ?(d]9JK
    vertical-align:middle;
w5N-?-z9^0}
5z;{ S9s,M h{(sn&X0-->
ap8f}o1E5@0</style>

13.为什么FF下面不能水平居中呢

FF下面设置容器的左右外补丁为auto就可以了

Code:

一缕阳光#Vu!KQ hP's&S~
<style. type="text/css">一缕阳光J ^3a/h%o1Ix.i
<!-- 一缕阳光/y4ZM M%cd1z
div {一缕阳光[m#U8E&z^(n
    margin:0 auto;一缕阳光6|'tu Ug:P
}一缕阳光1JP!|I(z
-->
w[z/a3z7b1zq3b4?0</style>

14.为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;  这里为了照顾不认识min-height的IE6 可以这样定义:

Code:

一缕阳光3I|Do E1j4\1bQ
{一缕阳光b0W/}V;e `,h
height:auto!important;
H{EwZf9U!y)Ro0height:200px;
?;U4Z6Rv"uZL0min-height:200px;
w"\1omI+Zd0}

15.为什么IE6下容器的宽度和FF解释不同呢

Code:

UR vZa&J0qO0<?xml version="1.0" encoding="gb2312"?>一缕阳光{8LT!Xk9yM@ \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">一缕阳光Hk7{
JK[n XD
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />一缕阳光5F+T{?t!h^ v*o
<style. type="text/css">一缕阳光/J;jA _Ee
<!--
$phm9Sj0div {
r0? HD&sEX0    cursor:pointer;
+h Lr%N/KS|cx'N0    width:200px;
6f#U y$US0    height:200px;
0l,K/M
]?fP0    border:10px solid red一缕阳光#VmR\7X~4O6L0n x
    }

-->
eHq)f [f0</style>一缕阳光)aLRo!\3Ce$t"D
<div nclick="alert(this.offsetWidth)">web标准常见问题大全</div>

M S,|/VP
NDD0问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
E:QzA?S6`^:?!r!o7S0ASPNETusStan.mspx?mfr=true

2Vy!@;pKd#] ^016.为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html

Code:

.e,Y](U8`M^0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

f
ze/hl-{T%ja0<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
0o2v!F1Y+P C0<style. type="text/css">
/ae4q\7S{u0<!-- 一缕阳光 DB/l\P6JN*v!R
html {一缕阳光)k3x2G&jwv/a5Q
    scrollbar-face-color:#f6f6f6;
Gr2m%Z!k,Uz'i ABi0    scrollbar-highlight-color:#fff;
5D WK?v!`f0    scrollbar-shadow-color:#eeeeee;
6~7qu{M c5|0    scrollbar-3dlight-color:#eeeeee;
lOr-V4?*[V0    scrollbar-arrow-color:#000;一缕阳光_m ?Z'w0N
    scrollbar-track-color:#fff;
zRt+l-Q0    scrollbar-darkshadow-color:#fff;一缕阳光"j2@llL
    }

-->
lR.YS8WN'y0</style>

17.为什么我定义的样式没有作用呢

这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa

Code:

一缕阳光bv"kI&^{"P@&iKG
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

O'P8ky ?#fbo0<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
"o1b'aQ&kX(S/EO0<style. type="text/css">
/?qRHPK;e:D0<!--
9_'i| [0r:H+r)R)g)]4M&]0#aa ul li {一缕阳光)H#Aa0_az6^J8^Z0F(p?
    color:red
'j*y;X%|1t-tY:c0    }一缕阳光:m;po2u RE)G\%R
.aa {
SU*H4@ o,un#d(F0    color:blue一缕阳光x}[9[W7X3]Yf~)y
    }
&E TDt8\B0-->
_ ?:x8AU u0</style>
$X
Q#X.},?Zy7ZM0<div id="aa">一缕阳光b:QB(PJVJP I
<ul>
K cRY2xj4DC0<li class="aa">
%r:L0K;y@0web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全

D$gf g4[-xwA0</li>一缕阳光
gBGb(`Wg'R
</ul>

</div>

18.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

一缕阳光~!` WF;y$y9Z2S/}Y
19.为什么这个背景颜色无法显示

Code:

一缕阳光"z
Fsbn)i])} r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
D({KXM5x0<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
(nFB4h7[}Teb0<style. type="text/css">
:MZ4R:{K k7J9rT0<!-- 一缕阳光;vW\}u {#Vsr
ul {一缕阳光K*HL,Jau
    background:red一缕阳光BVajNmldb-k%a
    }一缕阳光q7oG]LAV
F
Eb#Q
li {
qT YOB3N1v ^H0O0    float:left;
Gm9oOLI#T_nB0    width:180px;一缕阳光 \#t$F-z+V8p7[
    }
OYfm/Jcu J6x0-->一缕阳光u${f"lU`j
</style>
)Y(K\ l/oCqh0<!--[if lte IE 6]>一缕阳光]pDL._'z
<style>一缕阳光%f6Bn'Gt
.gainlayout { height: 1px; }
*x&w@3@3YN2u9r)p~0</style>一缕阳光I;p G9r
yKG
<![endif]-->  一缕阳光 W7Wx$p;^@8N}
<ul class="gainlayout">
@%f*w&z{Hc?g4A0<li>web标准常见问题大全</li>
9Y"s-`q/Td(DaA KJ0<li>web标准常见问题大全</li>一缕阳光
z;m&^w'n ]7O
<li>web标准常见问题大全</li>一缕阳光[k_Z(oZ!Su,x}r
<li>web标准常见问题大全</li>
X;CJ WP6K-m"DB0<li>web标准常见问题大全</li>

<div style="clear:both"></div>
'eE.tns1~8r,g0</ul>

一缕阳光*yGO9c;t-p'aa/Q
IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考 http://www.satzansatz.de/cssd/onhavinglayout.htm

解决方法之一:

Code:

一缕阳光9iy'c+k/}a
<!--[if lte IE 6]>
f? w\&bx8e0<style>
m.K-\1r*X H0.gainlayout { height: 1px; }
7T;I)h6a/g{&{ O2U WZ0</style>
2YApB(Os1A}3j0<![endif]--> 

20.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

Code:

/f#{vI ]j,Z/a0<param name="wmode" value="transparent" />

4J"`._1Ut021.怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

Code:

一缕阳光0b"packPs@!eC
<style. type="text/css">一缕阳光x4}8`ik_
<!--
(Us:Ev&s-I i0div {
o` ?1Vh%wW0    position:absolute;
C&y2Q.]2_0    top:50%;一缕阳光'l
mZ%S7G%c V
    left:50%;
-K4o;P&U`hc0    margin:-100px 0 0 -100px;
Gh.f]xl0    width:200px;一缕阳光?K*c1_f)gM V
    height:200px;
0nR;CZB g+h.N0    border:1px solid red;一缕阳光7ba_:n
@1E,LjOy ?+Z
    }

-->一缕阳光8h)L!z!{5r\7vb_
</style>

22 .图片垂直与容器内

Code:

一缕阳光5`*SY2h"d-[[Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">一缕阳光Iu N io;o Q
<style. type="text/css">一缕阳光W#]9^`/}
<!--
^[D*R1A0* {margin:0;padding:0}一缕阳光7b*Rjc6F7QG
div {一缕阳光&|Mc5E'uyY:s
    width:500px;
A#N}7L\rH0    height:500px;
:| op!\)J!V0    border:1px solid #ccc;一缕阳光+e&\/j'F%C H
    overflow:hidden;
B9l,ZV3A0    position:relative;一缕阳光%`7a*q2Y|,Lk*g
    display:table-cell;
XE(V/Aw#Dc0    text-align:center;一缕阳光;i9qm7yJ
    vertical-align:middle
]Z6q/s^2ou
j:x/C0    }一缕阳光Z bO6v9HJ8G0T
div p {
)E LG6?D*p0    position:static;一缕阳光Y;q`RP!s6@t
    +position:absolute;
n.U#M[dJ&k0    top:50%一缕阳光VP-UI3d#@o4x%H9|g
    }一缕阳光 B(e PZWT,y,YW
img {
,j#Ua]}]
y(p0    position:static;
?*y-f3Q IxLE0    +position:relative;一缕阳光:o8c2~B!S^/E
    top:-50%;left:-50%;一缕阳光x mJ1u:x2n2AC
    width:276px;
8T9J&{a*Y xA L/M2W4V0    height:110px一缕阳光#E'U
o[(mW1t
    }

-->
Vme
l%]0</style>

<div><p><img src="logo.gif" /></p></div>

3s6|PJ Y(fDWc!P0或者使用背景图的办法:

Code:

H9c6Tf4|(W0background:url("logo.gif") center no-repeat;

23.如何让div横向排列

横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.

Code:

%\g$s4c*\3}X
u$PM t0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">一缕阳光)d_x'G#yG]$D"j&e#n
o
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
y/DD*o.Vo;[!A0<style. type="text/css">
2qblfk:h0<!-- 一缕阳光D5{v6m.F:H!@$k;U
div {一缕阳光0B}0~T-V%Y;r
    float:left;一缕阳光3\D(K7zt
    width:200px;
)K ju}O*N
Mt@0    height:200px;
1Y@+Zp1}0a\0    border:1px solid red
$n8~Apy0s0    }
L7s&bUJ9yC0-->一缕阳光 u8NPd-y8DCZH pv
</style>

<div>web标准常见问题大全</div>一缕阳光2SW%GA,Z8Z-N4{?.Kf