DIV CSS HACK和瀏覽器兼容的方法有哪些

本文小編為大家詳細介紹“DIV CSS HACK和瀏覽器兼容的方法有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“DIV CSS HACK和瀏覽器兼容的方法有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一. 先容

這篇文章包括了8個尤為有用的圖謀方法, 在進行css設計碰著問題時你就會用到它們.

二. 針對瀏覽器的選擇器

這些選擇器在你須要針對某款涉獵器進行css設計時將非常有用.

IE6及其更低版本

* html {}

IE7及其更低版本

*:first-child+html {} * html {}

僅針對IE7

*:first-child+html {}

IE7和現代瀏覽器

html>body{}

僅古代瀏覽器(IE7不實用)

html>/**/body{}

Opera9及其更低版本

html:first-child {}

Safari

html[xmlns*=""] body:last-child {}

要運用這些選擇器,請將它們放在格局疇前. 好比:

#content-box {width:300px;height:150px;} * html #content-box {width: 250px; }  /* overrides the above style and changes the width to 250px in IE 6 and below */

三. 讓IE6贊成PNG透明

一個IE6的Bug惹起了毒品煩, 他不贊成通明的PNG圖片.(css實現ie6 png圖片通明)

你需求使用一個css濾鏡

*html #image-style {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil ename.png", sizingMethod="scale");}

四. 移除超鏈接的虛線(僅對FF有用)

FireFox下,當你點擊一個超鏈接時會在核心出現一個虛線外觀. 這很容易管理, 只重要在標簽技倆中列入 outline:none .

a{outline: none;}

五. 給行內元素定義寬度

假如你給一個行內元素定義寬度,那末它只是在IE6下有效. 一切的HTML元素要么是行內元素要么就好是塊元素. 行內元素包括: <span>, <a>, <strong> 和 <em>. 塊元素包括<div>, <p>, <h2>, <form>與<li> . 你不克不及定義行內元素的寬度, 為了用意這個問題你可以將行內元素更改成塊元素.

span { width: 150px; display: block }

六. 讓靜止寬度的頁面居中

為了讓頁面在瀏覽器居中顯示, 需要相對于定位外層div, 而后把margin配置為auto.

#wrapper {margin: auto;position: relative;}

七. 圖片改換技術

用文字總比用圖片做標題好一些. 筆墨對屏幕閱讀機和SEO凡曲直短長常朋儕的.

HTML:

<h2><span>Main heading one</span></h2>

CSS:

h2 { bac千克round:url(heading-image.gif) no-repeat; } h2 span {position:absolute;text-indent:-5000px;}

你可以看到咱們對標題問題運用了尺度的<h2>作為標簽況且用css來將文本變革為圖片. text-indent屬性將筆墨推到了涉獵器左邊5000px處, 這樣關于涉獵者來講就看不見了.

關掉css,爾后看看頭部會是什么模樣的.

八. 最小寬度

IE6其它一個裂縫即是它不支持 min-width 屬性. min-width又是相稱有用的, 特別是對付彈性模板來講, 它們有一個100%的寬度,min-width 可以陳訴涉獵器甚么時刻就不要再緊縮寬度了.

除IE6之外一切的涉獵器你只緊要一個 min-width: Xpx; 比如:

.container {min-width:300px;}

為了讓他在IE6下任務, 我們需求一些特別的任務. 劈頭的時刻我們緊要建立兩個div, 一個采集另外一個:

<div class="container">     <div class="holder">Content</div> </div>

爾后你必要定義外層div的min-width屬性

.container {min-width:300px;}

這時該是IE hack大顯才智的時辰了. 你須要包含下列的代碼:

* html .container {border-right: 300px solid #FFF;} * html .holder {display: inline-block;position: relative;margin-right: -300px;}

隨著瀏覽器窗口大小的外層div寬度消沉，以適應直到它縮小到了邊框的寬度，此時它不會進一步萎縮的。持有人DIV跟風，也終止萎縮。外層的div邊框寬度成為內div的最小寬度。

九. 潛藏水準滾動條

為了防范出現水平轉折條, 在body里參與 overflow-x:hidden .

body { overflow-x: hidden; }

讀到這里，這篇“DIV CSS HACK和瀏覽器兼容的方法有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。