您的位置：首页 > Web前端 > CSS

css兼容问题

2010-08-06 11:23 120 查看

兼容问题

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定line-height。确保所有文字都有默认的line-height值。

2.ff下容器高度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.横向上的内容撑破容器问题。如果float容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

4.浮动的清除，ff下必须清除浮动clear:both。

5.double-marginbug。ie6下给浮动容器定义margin-left或者margin-right实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

6.marginbug.当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug出现的情况较为复杂，远不只这一种出现条件。解决方案：外层元素设定border或设定float。

7.吞吃现象.还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。

8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if!IE]>picRotatestart<![endif]–>”方法写注释。

9.img下的留白，大家看这段代码有啥问题：

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，给img设定display:block可以解决。

10去line-height。<divstyle=”line-height:20px”><img/>文字</div>，很遗憾，在ie6下单行文字line-height效果消失了。。。，原因是<img/>这个inline-block元素和inline元素写在一起了。解决方案：让img和文字都float起来。

11接的hover状态。a:hoverimg{width:300px}我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。

12链接的hover状态。div:hover{}这样的样式ie6是不认的，在ie7、ff下才有效果。

13block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff下正常。

14无法彻底清除的float。解决方案：给ul属性zoom:1（给li加zoom:1没用）

15ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

16．e6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。

17．e6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。

18．下的bug，<head></head>内有<basetarget=”_blank”/>的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

19．f的缺点。width:100%在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。

20．iE6的问题。当层的高度小于20px时，IE6下要定义font-size：0px;否则高度为20px;

21．ff下，只有body和html同时定义height:100%,高度才为100%。IE下只需要定义body.

22．div的垂直居中问题:

vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行.

23．IE捉迷藏的问题

　　当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

　　有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

24．么web标准中IE无法设置滚动条颜色了

　　解决办法是将body换成html

25．链接(a标签)的边框与背景

　　a链接加边框和背景色，需设置display:block,

26..ul标签在ff中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
　　就能解决大部分问题

27.ff:div设置margin-left,margin-right为auto时已经居中,IE不行

ff:body设置text-align时,div需要设置margin:auto(主要是margin-left,margin-right)方可居中

28.tu片居中，文字居左的写法。

.abc{text-align:left}

abcimg{display:block;text-align:center;margin:oauto;}

29.层垂直居中的样式：

div{

position:absolute;

top:50%;

left:50%;

margin:-117px00-187px;

width:374px;

height:234px;

background-image:url(images/beijing.jpg);

}

30.form在IE6里面底下会多出来一行，加上style="padding:0;margin:0;">

32．空td显示边框table{border-collapse:collapse;}

33.鼠标经过图片变化图片

functionimagechange(img)

{

document.images[0].src=img;

document.images[0].width=400;

document.images[0].height=300;

}

</script>

</head>

<body>

<ahref="#"onmouseout="imagechange('images1.jpg')"onmousemove="imagechange('images2.jpg')"><imgsrc="images2.jpg"width="400"height="300"/></a>

</body>

34.表单输入框默认文字的设置

functioncleanUp(id){

if(document.getElementById("userid").value=="请输入搜索关键字")

{

document.getElementById(id).value="";

}

}

<inputclass="inp"id="userid"name="userid"type="text"value="请输入搜索关键字"onclick="cleanUp('userid');"/>

35.图片透明兼容写法：

filter:alpha(opacity=70);-moz-opacity:0.7;

36文字和图片在同一行垂直居中问题：

一个关键的属性:margin-bottom通过修改图片的外边框的底部高度就可以让文字移动上来.做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的style="margin-bottom:-3px"这样文字和图片就居中了

兼容性一直都是个令人头痛的问题，下面简单总结火狐与IE的兼容性问题。

如果掌握了以下24个问题，那基本上所有的网页制作面试题都难不倒

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

1.<styletype="text/css">

2.<!--

3.a:link{}

4.a:visited{}

5.a:hover{}

6.a:active{}

7.-->

8.</style>

2.FireFox下如何使连续长字段自动换行
众所周知IE中直接使用word-wrap:break-word就可以了,FF中我们使用JS插入的方法来解决

1.<styletype="text/css">

2.<!--

3.div{

4.width:300px;

5.word-wrap:break-word;

6.border:1pxsolidred;

7.}

8.-->

9.</style>

10.<divid="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

11.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

12.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

13.aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Js代码

1.<scrīpttype="text/javascrīpt">

2./*<![CDATA[*/

3.functiontoBreakWord(el,intLen){

4.varōbj=document.getElementById(el);

5.varstrContent=obj.innerHTML;

6.varstrTemp="";

7.while(strContent.length>intLen){

8.strTemp+=strContent.substr(0,intLen)+"

9.";

10.strContent=strContent.substr(intLen,strContent.length);

11.}

12.strTemp+="

13."+strContent;

14.obj.innerHTML=strTemp;

15.}

16.if(document.getElementById&&!document.all)toBreakWord("ff",37);

17./*]]>*/

18.</script>

3.ff下为什么父容器的高度不能自适应
在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。

1.clear:both;

4.IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上

1.display:inline

5.IE6下绝对定位的容器内文本无法正常选择
此问题在IE6、7中存在,解决问题的办法是让IE进入到qurksmode。关于qurksmode的相关知识,请参考:
http://www.microsoft.com/..

6.IE6下图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img为display:block
或者设置vertical-align属性为vertical-align:topbottommiddletext-bottom都可以解决.

7.IE6下两个层中间有间隙
这个IE的3PXBUG也是经常出现的,解决的办法是给.right也同样浮动float:left或者相对IE6定义.leftmargin-right:-3px;

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

9.LI中内容超过长度后以省略号显示的方法
此方法适用与IE与OP浏览器

1.<styletype="text/css">

2.<!--

3.li{

4.width:200px;

5.white-space:nowrap;

6.text-overflow:ellipsis;

7.-o-text-overflow:ellipsis;

8.overflow:hidden;

9.}

10.-->

11.</style>

10.web标准中定义id与class有什么区别吗
一.web标准中是不容许重复ID的,比如divid="aa"不容许重复2次,而class定义的是类,理论上可以无限重复,这样需要多次引用的定义便可以使用他.
二.属性的优先级问题
ID的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

11.如何垂直居中文本
将元素高度和行高设为一致。

1.<styletype="text/css">

2.<!--

3.div{

4.height:30px;

5.line-height:30px;

6.border:1pxsolidred

7.}

8.-->

9.</style>

12.如何对齐文本与文本输入框
加上vertical-align:middle;

1.<styletype="text/css">

2.<!--

3.input{

4.width:200px;

5.height:30px;

6.border:1pxsolidred;

7.vertical-align:middle;

8.}

9.-->

10.</style>

11.

13.FF下面不能水平居中呢
FF下面设置容器的左右外补丁为auto就可以了

1.<styletype="text/css">

2.<!--

3.div{

4.margin:0auto;

5.}

6.-->

7.</style>

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

1.{

2.height:auto!important;

3.height:200px;

4.min-height:200px;

5.}

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

1.<?xmlversion="1.0"encoding="gb2312"?>

2.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

4.<styletype="text/css">

5.<!--

6.div{

7.cursor:pointer;

8.width:200px;

9.height:200px;

10.border:10pxsolidred

11.}

12.-->

13.</style>

14.<divōnclick="alert(this.offsetWidth)">web标准常见问题大全</div>

问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurksmode,关于qurksmode、standardsmode的相关知识,请参考:
http://www.microsoft.com/..

16.为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html

1.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

3.<styletype="text/css">

4.<!--

5.html{

6.scrollbar-face-color:#f6f6f6;

7.scrollbar-highlight-color:#fff;

8.scrollbar-shadow-color:#eeeeee;

9.scrollbar-3dlight-color:#eeeeee;

10.scrollbar-arrow-color:#000;

11.scrollbar-track-color:#fff;

12.scrollbar-darkshadow-color:#fff;

13.}

14.-->

15.</style>

17.为什么我定义的样式没有作用呢
这里你无法用.aa定义到li遇到这种情况怎么解决呢？答案是提高.aa的优先权比如#aaulli.aa

1.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

3.<styletype="text/css">

4.<!--

5.#aaulli{

6.color:red

7.}

8..aa{

9.color:blue

10.}

11.-->

12.</style>

13.<divid="aa">

14.<ul>

15.<liclass="aa">

16.web标准常见问题大全

17.</li>

18.</ul>

19.</div>

18.IE6无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

1.overflow:hiddenzoom:0.08line-height:1px

19.背景颜色无法显示

1.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

3.<styletype="text/css">

4.<!--

5.ul{

6.background:red

7.}

8.li{

9.float:left;

10.width:180px;

11.}

12.-->

13.</style>

14.<!--[iflteIE6]>

15.<style>

16..gainlayout{height:1px;}

17.</style>

18.<![endif]-->

19.<ulclass="gainlayout">

20.<li>web标准常见问题大全</li>

21.<li>web标准常见问题大全</li>

22.<li>web标准常见问题大全</li>

23.<li>web标准常见问题大全</li>

24.<li>web标准常见问题大全</li>

25.<divstyle="clear:both"></div>

26.</ul>

IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考http://www.satzansatz.de/cssd/onhavinglayout.htm
解决方法之一:

1.<!--[iflteIE6]>

2.<style>

3..gainlayout{height:1px;}

4.</style>

5.<![endif]-->

6.<!--[iflteIE6]>

7.<style>

8..gainlayout{height:1px;}

9.</style>

10.<![endif]-->

20.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明

1.<paramname="wmode"value="transparent"/>

21.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

1.<styletype="text/css">

2.<!--

3.div{

4.position:absolute;

5.top:50%;

6.left:50%;

7.margin:-100px00-100px;

8.width:200px;

9.height:200px;

10.border:1pxsolidred;

11.}

12.-->

13.</style>

22.图片垂直与容器内

1.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.<styletype="text/css">

3.<!--

4.*{margin:0;padding:0}

5.div{

6.width:500px;

7.height:500px;

8.border:1pxsolid#ccc;

9.overflow:hidden;

10.position:relative;

11.display:table-cell;

12.text-align:center;

13.vertical-align:middle

14.}

15.divp{

16.position:static;

17.+position:absolute;

18.top:50%

19.}

20.img{

21.position:static;

22.+position:relative;

23.top:-50%;left:-50%;

24.width:276px;

25.height:110px

26.}

27.-->

28.</style>

29.<div><p><imgsrc="logo.gif"/></p></div>

或者使用背景图的办法:

1.background:url("logo.gif")centerno-repeat;

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

1.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

3.<styletype="text/css">

4.<!--

5.div{

6.float:left;

7.width:200px;

8.height:200px;

9.border:1pxsolidred

10.}

11.-->

12.</style>

13.<div>web标准常见问题大全</div>

14.<div>web标准常见问题大全</div>

15.

16.

17.<div>web标准常见问题大全</div>

24Firefox关于DIV高度无法自适应的两种解决
如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以外，
出现和下面的内容重叠的现象。如果不给DIV设置高度，在Firefox中将不回因为里面的内容而撑开，而IE中就会自动根据内容撑开
解决方案：
1、在DIV内部的最后追加clear:both样式

1.<divstyle="background-color:#FF0000;">

2.<divstyle="float:left;height:200px">JmediaDesign</div>

3.<divstyle="float:right;height:800px">www.jmedia.cn</div>

4.<divstyle="clear:both"></div>

5.</div>

2、对DIV使用overflow:auto；

1.<divstyle="overflow:auto;">

2.<divstyle="float:left;background-color:#000000;height:200px">1111111111</div>

3.<divstyle="float:right;background-color:#000000;height:300px"">2222222222</div>

4.</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航