DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS布局在IE和firefox中常見不兼容問題及解決方法
DIV+CSS布局在IE和firefox中常見不兼容問題及解決方法
編輯:CSS詳解     

DIV+CSS構建網站時常會出現浏覽器不兼容的問題,下面整理了一些常見不兼容問題,及解決辦法!相信本文介紹一定會讓你有所收獲。

網頁中用DIV+CSS布局在IE和Firefox中不兼容問題的整理

DIV+CSS構建網站時常會出現浏覽器不兼容的問題,下面整理了一些常見不兼容問題,及解決辦法!

1、用!important解決IE和Mozilla的布局差別

!important是CSS1就定義的語法,作用是提高指定樣式規則的應用優先權,最重要的一點是:IE一直都不支持這個語法,而其他的浏覽器都支持。因此我們就可以利用這一點來分別給IE和其他浏覽器不同的樣式定義,例如,我們定義這樣一個樣式:

  1. .colortest{border:20pxsolid#60A179!
  2. important;border:20pxsolid#00F;padding:30px;width:300px;}

在Mozilla中浏覽時候,能夠理解!important的優先級,因此顯示#60A179的顏色;在IE中浏覽時候,不能夠理解!important的優先級,因此顯示#00F的顏色。

2、解決超鏈接訪問過後hover樣式不顯示的問題

改變CSS屬性的排列順序:先後順序標准應為:a:link—a:visited—a:hover—a:active

3、Li中內容超過長度後以省略號顯示的方法

  1. <metacontentmetacontent="text/Html;charset=gb2312"
  2. http-equiv="Content-Type"/><styletypestyletype="text/CSS">
  3. <!--
  4. li{
  5. width:200px;
  6. white-space:nowrap;
  7. text-overflow:ellipsis;
  8. -o-text-overflow:ellipsis;
  9. overflow:hidden;}
  10. --></style>
  11. <ul>
  12. <li><ahrefahref="#">web標准常見問題大全web標准常見問題大全</a></li>
  13. <li><ahrefahref="#">web標准常見問題大全web標准常見問題大全</a></li>
  14. </ul>

4、margin和padding定義尺寸的縮寫

margin:3px——表示所有邊都是3px;
margin:3px5px——表示top和bottom的值是3px,right和left的值是5px
margin:3px5px7px——表示top的值是3,right和left的值是5,bottom的值是7
margin:3px5px7px5px——四個值依次表示top,right,bottom,left;上右下左。

5、解決IE不能正確顯示透明PNG——header內加入代碼

  1. <scriptlanguagescriptlanguage="Javascript">
  2. functioncorrectPNG()
  3. {
  4. for(vari=0;i<document.images.length;i++)
  5. {
  6. varimg=document.images[i]
  7. varimgName=img.src.toUpperCase()
  8. if(imgName.substring(imgName.length-3,imgName.length)=="PNG")
  9. {
  10. varimgID=(img.id)?"id='"+img.id+"'":""
  11. varimgClass=(img.className)?"class='"+img.className+"'":""
  12. varimgTitle=(img.title)?"titletitle='"+img.title+"'":"title='"+img.alt+"'"
  13. varimgStyle="display:inline-block;"+img.style.CSSText
  14. if(img.align=="left")imgStyle="float:left;"+imgStyle
  15. if(img.align=="right")imgStyle="float:right;"+imgStyle
  16. if(img.parentElement.href)imgStyle="cursor:hand;"+imgStyle
  17. varstrNewHtml="<span"+imgID+imgClass+imgTitle
  18. +"style=\""+"width:"+img.width+"px;height:"+img.height+"px;"+imgStyle+";"
  19. +"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  20. +"(src=\'"+img.src+"\',sizingMethod='scale');\"></span>"
  21. img.outerHtml=strNewHtml
  22. ii=i-1
  23. }
  24. }
  25. }
  26. window.attachEvent("onload",correctPNG);
  27. </script>

6、ul在Firefox和IE下表現不同

使用(padding:0;margin:0;list-style:inside;)或者(padding:0;margin:0;list-style:none;)實現兼容

7、BOX模型在Firefox和IE中的解釋相差2px的解決方法

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序一定不能寫反。根據上面提到的IE並不支持!important,所以在IE下其實解釋成這樣:

  1. div{maring:30px;margin:28px}

重復定義的話按照最後一個來執行,所以不可以只寫margin:XXpx!important;

8、margin的默認效果

div裡的內容,IE默認為居中,而ff默認為左對齊。使ff內容居中的方法是增加代碼margin:auto

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved