關(guān)于css兼容性問題及一些常見問題匯總

目前主流瀏覽器的兼容性做的都比較好了,本文主要針對IE6,7的不兼容問題進(jìn)行解決。
1.有浮動存在時,計算一定要精確,不要讓內(nèi)容的寬高超出我們所設(shè)置的寬高,IE6下,內(nèi)容會撐開設(shè)置好的高度。
解決方法:給對應(yīng)的父級加overflow:hidden;但是會有部分被隱藏掉,最好是精確計算寬高再設(shè)定
eg:(ie會撐開)
- <style>
- box{ width:400px;}
- left{ width:200px;height:300px;background:red;float:left;}
- right{ width:200px;float:right;}
- div{width:180px;height:180px;background:blue;padding:15px;}
- *
- 計算一定要精確 不要讓內(nèi)容的寬高超出我們設(shè)置的寬高
- 在IE6下,內(nèi)容會撐開設(shè)置好的寬高
- /
- </style>
- </head>
- <body>
- <div class="box">
- <div class="left"></div>
- <div class="right">
- <div class="div"></div>
- </div>
- </div>
- </body>
2. 在IE6下有元素浮動時,如果寬度需要由內(nèi)容撐開,就給里邊的塊元素都加浮動,正常瀏覽器不用加浮動。
eg:
- <style>
- box{ width:400px;}
- left{background:red;float:left;}
- right{float:right; background:blue;}
- h3{margin:0;height:30px; float:left;}
- /*
- 在IE6元素浮動,如果寬度需要內(nèi)容撐開,就給里邊的塊元素都加浮動
- */
- </style>
- </head>
- <body>
- <div class="box">
- <div class="left">
- <h3>左側(cè)</h3>
- </div>
- <div class="right">
- <h3>右側(cè)</h3>
- </div>
- </div>
- </body>
3. 在IE6下元素的高度的小于19px的時候,會被當(dāng)做19px來處理
解決辦法:添加overflow:hidden;
4. 在IE6下border:1px dotted #000;中,dotted不支持,會以虛線的方式的出現(xiàn)。
解決方法:切背景平鋪
5. 在所有瀏覽器中子元素的margin-top,margin-bottom值會傳遞給父級;
解決辦法:
a:給父級都添加浮動(或者給子級添加浮動也能解決margin-top問題,但是margin左右值會出現(xiàn)雙倍的值,也就是雙邊據(jù)bug問題,下面會講);
b:給父級添加position:relative;(或position:absolute;但是會脫離文檔流)
c:添加display:inline-block; 正常瀏覽器,可行,但是IE,7下,塊元素不支持display:inline-block;
d: 給附件添加border屬性,例如border:1px solid red; 正常瀏覽器可行,在IE6下必須再給父級添加zoom:1;
eg:
- <style>
- body{margin:0;}
- box{background:blue;border:1px solid #000; zoom:1;}
- div{width:200px;height:200px;background:red;margin:100px;}
- /*
- 在IE6下解決margin傳遞要觸發(fā)haslayout
- 在IE6下父級有邊框的時候,子元素的margin值消失
- 解決辦法:觸發(fā)父級的haslayout
- */
- </style>
- </head>
- <body>
- <div class="box">
- <div class="div"></div>
- </div>
- </body>
6. 在IE6下,塊元素有浮動和和橫向的margin值 ,橫向的margin值會被放大成兩倍。
解決辦法:添加display:inline;
- <style>
- .box{ float:left;border:10px solid #000;}
- .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}
- /*
- margin-right 一行右側(cè)第一個元素有雙邊距
- margin-left 一行左側(cè)第一個元素有雙邊距
- */
- </style>
- </head>
- <body>
- <div class="box">
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- </div>
- </body>
7. 在IE6,7下,li自身沒浮動,但是li的內(nèi)容有浮動,li下邊就會產(chǎn)生一個間隙
解決辦法:1.給li加浮動
2.給li加vertical-align:top;
注意:當(dāng)IE6下最小高度問題,和 li的間隙問題共存的時候, 給li加浮動才能解決。
eg:
- <style>
- ul{margin:0;padding:0;width:302px;}
- li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}
- a{width:100px;float:left;height:30px;background:Red;}
- span{width:100px;float:right;height:30px;background:blue;}
- /*
- 在IE6,7下,li本身沒浮動,但是li的內(nèi)容有浮動,li下邊就會產(chǎn)生一個間隙
- 解決辦法:
- 1.給li加浮動
- 2.給li加vertical-align
- */
- </style>
- </head>
- <body>
- <ul>
- <li>
- <a href="#"></a>
- <span></span>
- </li>
- <li>
- <a href="#"></a>
- <span></span>
- </li>
- <li>
- <a href="#"></a>
- <span></span>
- </li>
- </ul>
- </body>
8.當(dāng)一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態(tài)的時候,最后一行子元素的下margin在IE6下就會失效
解決方法:額,還沒發(fā)現(xiàn)
eg:
- <style>
- .box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;}
- .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;}
- /*
- 當(dāng)一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態(tài)的時候,最后一行子元素的下margin在IE6下就會失效
- */
- </style>
- </head>
- <body>
- <div class="box">
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <!-- <div>4</div> -->
- </div>
9. 在IE6下的文字溢出BUG。即:子元素的寬度和父級的寬度相差小于3px的時候,或者兩個浮動元素中間有注釋或者內(nèi)嵌元素的時候,IE6下文字溢出
解決辦法:用div把注釋或者內(nèi)嵌元素用div包起來。
eg:
- <style>
- .box{ width:400px;}
- .left{float:left;}
- .right{width:400px;float:right;}
- </style>
- </head>
- <body>
- <div class="box">
- <div class="left"></div>
- <!-- IE6下的文字溢出BUG --><span></span>
- <div class="right">↓哈哈哈哈哈哈哈哈哈哈</div>
- </div>
- <!--
- 在IE6下的文字溢出BUG
- 子元素的寬度和父級的寬度相差小于3px的時候,兩個浮動元素中間有注釋或者內(nèi)嵌元素
- 解決辦法:用div把注釋或者內(nèi)嵌元素用div包起來
- -->
- </body>
10. 當(dāng)浮動元素和絕對定位元素是并列關(guān)系的時候,在IE6下絕對定位元素會消失。
解決辦法: 給定位元素外面包個div。
eg:
- <style>
- .box{ width:200px;height:200px;border:1px solid #000; position:relative;}
- span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
- ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
- /*
- 當(dāng)浮動元素和絕對定位元素是并列關(guān)系的時候,在IE6下絕對定位元素會消失
- 解決辦法:
- 給定位元素外面包個div
- */
- </style>
- </head>
- <body>
- <div class="box">
- <ul></ul>
- <span></span>
- </div>
11. 在IE6,7下,子元素有相對定位的話,父級的overflow包不住子元素。
解決辦法: 給父級也加相對定位 position:relative;。
eg:
- <style>
- .box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /* position:relative; */ }
- .div{ width:150px;height:300px;background:yellow; position:relative;}
- /*
- 在IE6,7下,子元素有相對定位的話,父級的overflow包不住子元素
- 解決辦法: 給父級也加相對定位position:relative;
- */
- </style>
- </head>
- <body>
- <div class="box">
- <div class="div"></div>
- </div>
- </body>
12. 在IE6下絕對定位元素的父級寬高是奇數(shù)的時候,元素的right值和bottom值會有1px的偏差.
解決辦法: 盡量用偶數(shù),還沒發(fā)現(xiàn)別的方法。
13. 在IE6下,position:fixed; 是沒有效果的。
解決方法:用js來控制吧。。。
14. 在IE6,7下輸入類型的表單控件上下各有1px的間隙。
解決辦法:給input加浮動,或者是絕對定位。
15. 在IE6,7下輸入類型的表單控件加border:none;會發(fā)現(xiàn)border還在,
解決辦法: 重置input的背景,如input{background:#fff;}; 或者使用border:0;或border:0 none;
16. 在IE6,7下輸入類型的表單控件輸入文字的時候,其背景圖片會跟著一塊移動 。
解決辦法: 把背景加給父級。
17. 更簡潔的css清理浮動方式:
- 方法1:
- /* 清理浮動 */
- .clearfix:after {
- visibility:hidden;
- display:block;
- font-size:0;
- content:" ";
- clear:both;
- height:0;
- }
- .clearfix {
- zoom:1;
- }
- 方法2:
- 在父元素加代碼:overflow:auto; zoom:1;
18. css強(qiáng)制換行與強(qiáng)制不換行:
/* 禁止換行 */ .nowrap{word-break:keep-all;white-space:nowrap;}
/* 強(qiáng)制換行 */ .break{word-break:break-all;}
19. 超鏈接樣式的設(shè)置:
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
格式化標(biāo)簽的默認(rèn)樣式;
20. css/js在線壓縮:(有YUI Compressor工具)
http://ganquan.info/yui/?hl=zh-CN
21. 當(dāng)一行固定寬度,且顯示不下內(nèi)容,則加省略號:
- {white-space:nowrap;
- text-overflow:ellipsis; /* for internet explorer */
- overflow:hidden;
- width:190px;
- display:block;
- text-overflow:ellipsis}
- text-overflow:ellipsis(代表三個點(diǎn)的省略號)
22. 瀏覽器兼容性
margin-bottom:40px; /*ff的屬性*/
margin-bottom:140px\9; /* IE6/7/8的屬性 */
color:red\0; /* IE8支持 */
*margin-bottom:450px; /*IE6/7的屬性*/
_margin-bottom:450px; /*IE6/7的屬性*/
以上這篇關(guān)于css兼容性問題及一些常見問題匯總就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/shouce/archive/2016/05/03/5453732.html
相關(guān)文章
- 本文為大家詳細(xì)介紹三列布局,分為兩側(cè)定寬中間自適應(yīng)、兩列定寬一側(cè)自適應(yīng)、中間定寬兩側(cè)自適應(yīng)、一側(cè)定寬兩列自適應(yīng)和三列自適應(yīng)五種情況,感興趣的小伙伴們可以參考一下2016-05-04
- 這篇文章為大家分享了CSS網(wǎng)頁中時光軸的簡單實(shí)現(xiàn)方法,記錄每個時間段、時間點(diǎn)所發(fā)生的事情,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-04
- 這篇文章主要為大家詳細(xì)介紹了CSS實(shí)現(xiàn)等分布局的4種方式,等分布局是指子元素平均分配父元素寬度的布局方式,本文將介紹實(shí)現(xiàn)等分布局的4種方式,感興趣的小伙伴們可以參考2016-05-04
- 這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)曲線陰影和翹邊陰影的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-03
- 點(diǎn)擊登陸面板會發(fā)生360度旋轉(zhuǎn),并顯示信息,真正使用CSS3讓登陸面板3D旋轉(zhuǎn)起來,如何實(shí)現(xiàn)登陸面板3D旋轉(zhuǎn),感興趣的小伙伴們可以參考一下2016-05-03
- 這篇文章主要為大家詳細(xì)介紹了CSS3 3D 位移translate效果實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-03
CSS3 3D旋轉(zhuǎn)rotate效果實(shí)例介紹
這篇文章主要為大家詳細(xì)介紹了CSS3 3D旋轉(zhuǎn)rotate效果實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-03- 這篇文章主要為大家詳細(xì)介紹了CSS3過渡transition效果實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-03
- 這篇文章主要介紹了四種CSS常用的選擇器使用方法和注意事項(xiàng),為大家介紹了CSS選擇器的優(yōu)先級,感興趣的小伙伴們可以參考一下2016-05-03
CSS控制文本超出指定寬度顯示省略號和文本不換行效果的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狢SS控制文本超出指定寬度顯示省略號和文本不換行效果的實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05