由於各大主流瀏覽器由不同的廠家開發,所用的核心架構和**也很難重和,這就為各種莫名其妙的bug(**錯誤)提供了溫床。再加上各大廠商出於自身利益考慮而設定的種種技術壁壘,都讓css應用起來比想象得要麻煩。瀏覽器的相容問題是我們必須去克服的。
主流瀏覽器
瀏覽器中文名核心
internet explorer
ie瀏覽器
核心: trident
safari
蘋果瀏覽器
webkit
google chrome
谷歌瀏覽器
blink
mozilla firefox
火狐瀏覽器
gecko
opera
歐朋prsto
如何在ie6及更早的瀏覽器中定義小高度的容器
ie6及更早瀏覽器之所以無法直接定義較小高度的容器是因為缺省會有行高
hack:
#test
如何在ie6及更早的瀏覽器產生雙編劇的bug
當ie6及更早瀏覽器出現浮動後margin值解析為雙倍的情況,設定該元素的display屬性為inline即可
#test
如何在ie6及更早的瀏覽器模擬min-height效果
注意此時#test不能再設定overflow的值為hidden,否則模擬min-height效果將失效
#test
如何解決按鈕在ie7及更早瀏覽器下隨著value增多兩邊留白也隨著增加的問題?
input,button
除了top值,還可以設定為text-top/middle/bottom /text-bottom
如何解決按鈕在ie7及更早瀏覽器下隨著value增多兩邊留白也隨著增加的問題?
input,button
1.如何清除下方出現幾畫素的空白間隙?
方法1:
img
方法2:
img2.如何讓文字垂直對齊文字輸入框?
方法:
input
3.如何讓超連結訪問後和訪問前的顏色不同且訪問後仍保留hover和active效果?
方法:
a:link
a:visited
a:hover
a:active
4.如何使文字溢位邊界顯示為省略號?
方法:
test
5.如何使連續的長字串自動換行?
方法:
test
6.如何讓未知尺寸的在已知寬高的容器內水平垂直居中?
方法:
test
test p
test p img
7.如何去掉超連結的虛線框?
方法:
a8.為什麼2個相鄰div的margin只有1個生效?
.box2
class="box1">box1div>
class="box2">box2div>
本例中box1的底部margin為10px,box2的頂部margin為20px,但表現在頁面上2者之間的間隔為20px,而不是預想中的10+20px=30px,結果是選擇2者之間最大的那個margin,我們把這種機制稱之為「外邊距合併」;外邊距合併不僅僅出現在相鄰的元素間,父子間同樣會出現。
簡單列舉幾點注意事項:
外邊距合併只出現在塊級元素上;
浮動元素不會和相鄰的元素產生外邊距合併;
絕對定位元素不會和相鄰的元素產生外邊距合併;
內聯塊級元素間不會產生外邊距合併;
根元素間不會不會產生外邊距合併(如html與body間);
設定了屬性overflow且值不為visible的塊級元素不會與它的子元素發生外邊距合併;
9.如何在文字框中禁用中文輸入法?
方法:
input,textarea
ime-mode為非標準屬性,寫該文件時只有ie和firefox支援
position fixed 相容ie6問題
最近做專案時用了 來固定div在頁面的最下方,且不隨滾動條滾動而滾動。由於ie6不支援fixed,所以加了 postion absolute bottom expression offsetparent.scrolltop 20 來做相容,此段 在測試頁面ie 6 8都沒問題,但是在專案裡在ie7裡...
IE6相容相容心得 自己總結的
doctype document type 文件型別,說明 xml 或者 x html 的版本。dtd document type definitions 文件型別定義,瀏覽器根據 dtd 來解釋頁面標識,並展現出來。doctype 通常 但不總是 包含指定的dtd檔案的url。瀏覽器一般不讀取這些...
IE6下 position fixed 相容問題
本文所使用的技巧是用了一條internet explorer的css表示式 expression 你不可以直接使用該表示式,因為它可能會因為快取而不更新。解決這一點的最簡單的方式是使用eval包裹你的語句。顯然ie有乙個多步的渲染程序。當你滾動或調整你的瀏覽器大小的時候,它將重置所有內容並重畫頁面,...