DIV CSS布局瀏覽器兼容的問題
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:24:32 作者:佚名
我要評論

剛學(xué)css div布局,總會(huì)遇到很多瀏覽器兼容的問題,這個(gè)問題困擾了一段時(shí)間,只到看了精通css才看到幾個(gè)解決辦法。
1.加clear空div
.clearfix:after {
content: "."; display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display:
剛學(xué)css div布局,總會(huì)遇到很多瀏覽器兼容的問題,這個(gè)問題困擾了一段時(shí)間,只到看了精通css才看到幾個(gè)解決辦法。
1.加clear空div
.clearfix:after {
content: "."; display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}/* End hide from IE-mac */
.clearfix {
display: block;
margin: 0px;
clear: both;
padding: 0px;
visibility: hidden;
background-color:#666666;
border:0px none #FFFFFF;
}
.clearfix:after { height: 1px;}
使用方法:
在所有浮動(dòng)層之后加上這個(gè)層
<div class="clearfix"></div>
2.把背景層加浮動(dòng),但是這個(gè)方法會(huì)影響其他的div,有時(shí)候好用。
3.加 overlow 這個(gè)也有問題,會(huì)影響div的外觀。
總之 希望以后的以后只有一種瀏覽器...
相關(guān)文章
- 本文主要介紹了css九宮格布局的五種方法,內(nèi)容包括grid布局、flex布局、table布局、float浮動(dòng)定位、inline-block+letter-spacing屬性這五種方法的實(shí)現(xiàn),感興趣的可以了解下2023-09-18
- 在Web開發(fā)中,經(jīng)常會(huì)遇到需要將元素水平和垂直居中的情況,今天,將為大家分享幾種CSS方法,讓你的元素輕松居中,讓頁面更美觀吸引人,感興趣的小伙伴可以自己動(dòng)手試一試2023-09-08
- 相信大家在面試的時(shí)候也會(huì)經(jīng)常碰到css實(shí)現(xiàn)元素居中的方法,下面我介紹6種方法給大家,歡迎大家評論區(qū)交流2023-09-07
flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐
最近需要做個(gè)換行的布局,本文主要介紹了flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需2022-06-16CSS布局之浮動(dòng)(float)和定位(position)屬性的區(qū)別
今天看到有朋友留言問浮動(dòng)和定位有什么區(qū)別,如何使用?今天找了篇文章,講的比較通俗易懂,供大家參考2021-09-23- 這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
- 這篇文章主要介紹了div水平布局兩邊對齊的三種實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2021-01-21
waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2021-01-19頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法
這篇文章主要介紹了頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來2020-11-27css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式
這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-28