2020-2-6 seo達人
CSS bug是布局中最頭疼的問題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競爭導致很多問題的存在。而IE6與IE7在很多問題上也存在著很大的差別。在webjx.com大量的技術文檔中，也包含了這方面的內容。輕松的解決CSS bug是我們必須掌握的技能。現在整理出最常用的12種CSS BUG解決方法以及CSS BUG類的小技巧。希望對您的學習、工作有所幫助新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
一、 針對瀏覽器的選擇器
這些選擇器在你需要針對某款瀏覽器進行css設計時將非常有用.
IE6及其更低版本
width: 300px;
height: 150px;
}
margin: auto;
position: relative;
}
六、IE6雙倍邊距的bug
給此對象加上display:inline即可解決問題。具體介紹：
七、Box Model 盒模型bug的一般解決辦法
八、兩個層之間的3px間隙
傳說中的“IE 3px bug”，解決的辦法：
九、在IE中的HTML注釋引起文字奇怪的復制
Duplicate Characters Bug很神奇。
十、圖片替換技術
用文字總比用圖片做標題好一些. 文字對屏幕閱讀機和SEO都是非常友好的.
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
你可以看到我們對標題使用了標準的<h1>作為標簽并且用css來將文本替換為圖片. text-indent屬性將文字推到了瀏覽器左邊5000px處, 這樣對于瀏覽者來說就看不見了.
關掉css,然后看看頭部會是什么樣子的.本文由webjx.com整理，轉載請注明出處！
十一、 最小寬度
IE6另外一個bug就是它不支持 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屬性，本文由webjx.com整理，轉載請注明出處！
.container {
min-width:300px;
}
這時該是IE hack大顯身手的時候了. 你需要包含如下的代碼: