web标准常见问题大全 让FireFox与IE兼容
作者:随然 日期:2008-10-27
摘要: 随着越来越多的人开始接受web标准,一些和以往有些不太一样的地方也让许多新手痛苦不堪。以前可能简单设置一下甚至不用设置就能实现的样式,现在却始终搞不定,本文列举了一些常见问题和解决方法,相信对新手很有帮助。
1.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
Code:
一缕阳光%Kf)q _ P7U
<style. type="text/css">一缕阳光7m0|'i D y$K k2Z E
<!-- 一缕阳光#r t x w j I
a:link {}一缕阳光4_5I/i K*_ N r*Y
a:visited {}一缕阳光z p%z+h/V-\*| l
a:hover {}一缕阳光 k*s w5[0b/|
a:active {}一缕阳光 c u [ q S+|
-->
T9w r J*P e0</style>
k @ e k0} W"_ | k02.FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决
Code:
一缕阳光2y ` Y d W k W%L Y;J
<style. type="text/css">
;a+P({ Y l.e t R0<!--
'R T k%M a+B0div {
\;@ O'} W t ?1n0 width:300px;
Z"Y%k R d W-u6l2r"O0 word-wrap:break-word;
W7P Q4K%n:]0 border:1px solid red;
g M1N x b Q0}
W2\ b h c&^ n r0] [6Y0-->一缕阳光 u6?%o*d K.p t
</style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script. type="text/javascript">一缕阳光 V m g L [1J I M6}*D4m
/* <![CDATA[ */一缕阳光"M)A)a*m'L ?
function toBreakWord(el, intLen){
L%@ ~+s _ B*j([4W0 var bj=document.getElementById(el);
1K ]9o5} B C C%} N A0 var strContent=obj.innerHTML; 一缕阳光 K4a b S \ E9d+L7y R F
var strTemp="";一缕阳光/K r S Z&Q2N+C'd
while(strContent.length>intLen){一缕阳光n q2F(^ EG0e"r {(d
strTemp+=strContent.substr(0,intLen)+" ";
C L t A)I,E([0 strContent=strContent.substr(intLen,strContent.length);
-W%}4I _K4_ C0 }一缕阳光 A3[:l ?5h
strTemp+=" "+strContent;一缕阳光;g K6B%J u g b
obj.innerHTML=strTemp;一缕阳光;[/I P v O _
}一缕阳光 ? F/O v4h h B+k |
if(document.getElementById && !document.all) toBreakWord("ff", 37);一缕阳光!R H+H G Ir$A(\2}
/* ]]> */
)Z+h$~ Q:`"@)m ^ _+o0</script>
3.ff下为什么父容器的高度不能自适应
在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。
Code:
`%n;[ } g6V ?0clear:both;
4.IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上
Code:
;f&P @,q |0` g0display:inline
5. IE6下绝对定位的容器内文本无法正常选择的问题
此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/一缕阳光7z,m9T| i+_ k8~
ASPNETusStan.mspx?mfr=true
| U/r!k:R j M)O u06. IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
X H @2[ E;F V8C0都可以解决.
8y%x t y Q x ^&g#d07. IE6下两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
3K6G u0@ N'K:T&Z n08. list-style-image无法准确定位的问题
list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。
一缕阳光 F+j o%T s t C%N
9. LI中内容超过长度后以省略号显示的方法
此方法适用与IE与OP浏览器
Code:
一缕阳光-} m!}3? a b x
<style. type="text/css">一缕阳光 s-w ] N P3L3M k
<!-- 一缕阳光+? a { c'H i#r-M X
li {
@5E0h+X$A#G M ~ E0 width:200px;
Z*U d9u h*U(h0 white-space:nowrap;一缕阳光u x U j L
text-overflow:ellipsis; 一缕阳光 Y X _:\3` L"p6Y9N r M(B2O
-o-text-overflow:ellipsis; 一缕阳光 G _;W M g7j(T
overflow: hidden;
K R6r q&k+g0 }
-->一缕阳光 U/T2s5j g:a b*A A
</style>
10.web标准中定义id与class有什么区别吗
一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题
Y ? mx o5g0ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
11.如何垂直居中文本
将元素高度和行高设为一致。
Code:
一缕阳光%Y ]-L z o"Y.c4s l
<style. type="text/css">
^ u9f ? S*x E#c0<!--
+m {:A6M&_*p X0div {一缕阳光 L u y H R6V E
height:30px;
(Y3j [7l.o Z-o O0 line-height:30px;一缕阳光'L%d/a n g r I3c
border:1px solid red一缕阳光1B/D1k@ X5`!M$W
}一缕阳光 |!c I ^8W R F0N
-->
8W a p A#m%R/u:]5@ j0</style>
12.如何对齐文本与文本输入框
加上 vertical-align:middle;
Code:
7F A x A w q0<style. type="text/css">
q D)R W0p Z D0<!-- 一缕阳光9T w+q h.i
input {
jM4k Y2i6H0 width:200px;一缕阳光&e f&h ] {,[
height:30px;一缕阳光1n3['G4C XS4v ~5G w
border:1px solid red;一缕阳光 d d"O i E x;b a
vertical-align:middle;一缕阳光0~ {(T w H X x N
}一缕阳光3z!W Q K U
-->
` B w ` H;@(W9p7z0</style>
13.为什么FF下面不能水平居中呢
FF下面设置容器的左右外补丁为auto就可以了
Code:
一缕阳光"n ? Z!|#p9^,b o;{ k b!q
<style. type="text/css">
A @&{ k u l k0<!-- 一缕阳光 ~ A*^2V d c M H
div {
~5K2A z4C h0{3a0 margin:0 auto;
g!I \ O5B s |0}一缕阳光6I'eq x(g B w @5Q
-->
s [ w x)[;h6?9~0</style>
14.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
Code:
一缕阳光 p ] K6d-N'o$C*~-c q
{一缕阳光0l [0o I ] G
height:auto!important;一缕阳光 o3g%Z ~ H(@"u
height:200px;一缕阳光$_0@9i B4b1u i h
min-height:200px;
m6C&b O L @"o d Z0}
15.为什么IE6下容器的宽度和FF解释不同呢
Code:
h {.w `3t$f t,` E0<?xml version="1.0" encoding="gb2312"?>
S Y ^$r&b w:{2]0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
!M q,V,G J L4E b#k0<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />一缕阳光;H a2X4u.\1c(A-i {7o
<style. type="text/css">一缕阳光 b!e0C9N T t G
<!--
a k L+h5f+s+H(~ t0div {
f5\/p K a t I0 cursor:pointer;
8_5i+e6j3] [6P:s |0 width:200px;
"h I T [ d m!m0 height:200px;
t6g*I9L j3_ R y Y0 border:10px solid red
7o M8~5F(I I4D$k8| y0 }
-->一缕阳光$E7o%[)[ [ K9q u0G(y(K
</style>一缕阳光5M _ q` @ e
<div nclick="alert(this.offsetWidth)">web标准常见问题大全</div>
Vy,C j c'X0问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
v)V ] ? ?,H o0ASPNETusStan.mspx?mfr=true
一缕阳光 @%Q.@ R O*S | s F
16.为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html
Code:
{ h z ` w&w S g0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Z r1q5O/\,l*W \0<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />一缕阳光 e6S5n"[ c {1F _ b
<style. type="text/css">
#h'~ p p n P&_ L$w+O0<!-- 一缕阳光,z:k4W N#I
html {一缕阳光9W e4q B;l*T
scrollbar-face-color:#f6f6f6;一缕阳光*Q"E7I v H([$z
scrollbar-highlight-color:#fff;
x i H |6X*x!A0 scrollbar-shadow-color:#eeeeee;
Q6Y u r M0 scrollbar-3dlight-color:#eeeeee;
.S$C P-[ z u0 scrollbar-arrow-color:#000;一缕阳光 S"w U*e C'T s
scrollbar-track-color:#fff;一缕阳光 m#_ ^ d W8b4A ^
scrollbar-darkshadow-color:#fff;一缕阳光4@9q%} O e+\ H
}
-->
$w s4u c,r0</style>
17.为什么我定义的样式没有作用呢
这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa
Code:
)S F"K g H I"?.[0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">一缕阳光-J't a$x [
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />一缕阳光 ^ b p }(v d d&R
<style. type="text/css">一缕阳光1D R#o h i H
<!--一缕阳光4V P I*` J!?
#aa ul li {一缕阳光 K E _+_#A z$`U
color:red
$F:K U.r g n O1^ ^0 }一缕阳光 s$T G p4i!X4D
.aa {一缕阳光 ]7|$K Q ^%f k E
color:blue
"i q q n7t#f.t I9W2F0 }
.k _7B-ho8l S d2n0-->一缕阳光 l t C2{2HF;}6q i
</style>一缕阳光0l ~4] n8a G f7j
<div id="aa">一缕阳光(k U E h A
<ul>一缕阳光2G9r B ^ w
<li class="aa">一缕阳光,p u S.l |"}
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全一缕阳光 b O W I M)E
</li>一缕阳光 _!b |2K$C D5U'T q:N n T c
</ul>
</div>
18.为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
一缕阳光 a%~4c$v p R
19.为什么这个背景颜色无法显示
Code:
一缕阳光-E2O t Y G-_
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">一缕阳光"l v S E ] V }4C
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />一缕阳光 ^ g o"d8h i#_%H)H
<style. type="text/css">一缕阳光 |(E9S6| u z B/d `9A'O q
<!--
)p8L2m8i @ R(J T k0ul {
*Q A M3p"[ ` j v%e D0 background:red一缕阳光 X Z B(l ~ o6i7i
}一缕阳光(F P m I.v E.e
li {一缕阳光,a4Y X ^8? [$r*p
float:left;一缕阳光&d#h S$N I*F ] k C S
width:180px;一缕阳光 y M u$Q L ^ { o ?+F
}一缕阳光6M q/} p.V2v R
-->一缕阳光 t'A |2~(I)Y U U Y
</style>一缕阳光 F j7f n1Z g
<!--[if lte IE 6]>
h4J;o n s a4a p0<style>
G ^;w5_ y0.gainlayout { height: 1px; }一缕阳光 T M x$c$T0k
</style>
~/I4] Z3a$`8o L)J0<![endif]--> 一缕阳光:k(v-Y L d2A s"I
<ul class="gainlayout">一缕阳光 R1x [ Q _ w3o e ],v s
<li>web标准常见问题大全</li>一缕阳光-E Q j&~/r i2A F N8q
<li>web标准常见问题大全</li>
e.X&E,L \0<li>web标准常见问题大全</li>
8@ v _:Y-\&U0<li>web标准常见问题大全</li>一缕阳光%[ t y c"N"[ H M
<li>web标准常见问题大全</li>
<div style="clear:both"></div>一缕阳光!J3R X R6Q
</ul>
一缕阳光 Y,x*Z _ S N+C k
IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考 http://www.satzansatz.de/cssd/onhavinglayout.htm
解决方法之一:
Code:
(N Q(C0d q2e M x g0<!--[if lte IE 6]>一缕阳光+[ U t6j"i p I z
<style>
E o$L,f q#E!K-r0.gainlayout { height: 1px; }
q Y z&\9U1H U0</style>
R M#j3h y"c a D V5y0<![endif]-->
20.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明
Code:
&n L T z E0<param name="wmode" value="transparent" />
一缕阳光;^ [8N"o j-s8c _ r
21.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
Code:
@ g D R1x s0<style. type="text/css">一缕阳光 A I Y } A*` B
<!--
{ l X p Z n @0div {
9X C s&T!P7@ u+C r0 position:absolute;
d)g$`*l.{ T P'P J0p0 top:50%;一缕阳光!z X m }:i.R D
left:50%;一缕阳光 M T v g c
margin:-100px 0 0 -100px;一缕阳光 q2_;e5w i p i
width:200px;一缕阳光 t*@ [ y Q2j [ V
height:200px;
g ]y)_1n f'I v2q j7|0 border:1px solid red;
;l \!L F5` Q0 }
-->
#~ ~.['D q/D O s P q;J0</style>
22 .图片垂直与容器内
Code:
一缕阳光 f/{;U3f3Z/i P C j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">一缕阳光5o/G I |_ N M ?
<style. type="text/css">一缕阳光 @ ^ h c B H e
<!-- 一缕阳光 M9_ ]"B z2I
* {margin:0;padding:0}一缕阳光2B%d.K W7X c
div {一缕阳光 g \+t ])^ L5v s
width:500px;一缕阳光 b j ~ j J f:K w
height:500px;
O J {(j | s&k&w F)P e0 border:1px solid #ccc;一缕阳光 |*y4_ N:}
overflow:hidden;
$X a4K A Z-D%D"X$l0 position:relative;
K n g;k to |9^.z#~0 display:table-cell;一缕阳光(w2x l,M M h I o x a3D n
text-align:center;一缕阳光1A;v | | V L P1W
vertical-align:middle一缕阳光 E;{ n-s V K$L1Q%O
}一缕阳光.y)O#j M A N
div p {
;P;F p P4i S6b0 position:static;一缕阳光6f1r c!J'c%H [
+position:absolute;
%x e)] f w u#I$~ f*I.l0 top:50%一缕阳光 P k ["|8L |:g'O W k+q
}
j9C'I Y p T } V ` E5\0img {一缕阳光'p cM J }6o
position:static;一缕阳光'{ x \ B*D S
+position:relative;
A C @&t+y ]!D ]5I O P r T0 top:-50%;left:-50%;
4b k+\ [ E0 width:276px;一缕阳光 W3_!N-^ z \:k c
height:110px
A f q6e-d0 }
-->一缕阳光4S4@ u3}#y q:^
</style>
<div><p><img src="logo.gif" /></p></div>
9y o N |2i u V;J0或者使用背景图的办法:
Code:
一缕阳光 N)r S H)T
background:url("logo.gif") center no-repeat;
23.如何让div横向排列
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.
Code:
一缕阳光 y U l t*]3K I u"P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">一缕阳光/o W A,N;j j*P M ^
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />一缕阳光 G j o ` {,t y:~ V
<style. type="text/css">
8z-A @ m };J L0<!-- 一缕阳光6R3j v!~3` ~ D
div {一缕阳光 { m q6T1r Z b3_4X*D A ~0o,`
float:left;
+H$l G2{ Y C0 width:200px;一缕阳光5L5j h+v X q3q F
height:200px;一缕阳光 t6z.q1M%C t9F { p | [ B$S
border:1px solid red
&v3H m M,[ [0 }
a1L.| [1| O b0-->一缕阳光 [ o'I8I n(`
</style>
上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 10280
发表评论
