JavaScript開發之網頁相容各種瀏覽器的詳細介紹-js教程-PHP中文網

JavaScript開發之網頁相容各種瀏覽器的詳細介紹

黄舟

發布： 2017-10-03 06:00:32

原創

1312 人瀏覽過

這篇文章主要介紹了javascript 開發之網頁兼容各種瀏覽器的相關資料,這裡提供了幾種方法幫助大家掌握這樣的功能，需要的朋友可以參考下

javascript 開發之網頁相容於各種瀏覽器

前言：

關於CSS對各個瀏覽器相容已經是老生常談的問題了, 網路上的教程遍地都是.以下內容沒有太多新穎, 純屬個人總結, 希望能對初學者有一定的幫助.

一、CSS HACK

以下兩種方法幾乎能解決現今所有HACK.

1, !important

隨著IE7對!important的支持, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)

<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>

登入後複製

2, IE6/IE77對FireFox

##*+html 與*html 是IE特有的標籤, firefox 暫不支援.而*+html 又為IE7特有標籤.

<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>

登入後複製

注意:

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

登入後複製

二、萬能float 閉合(非常重要!)

關於clear float 的原理可參見[How To Clear Floats Without Structural Markup]

將以下程式碼加入Global CSS 中,給需要閉合的p加上class="clearfix" 即可,屢試不爽.

<style>


.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}

.clearfix {display:block;}


</style>

登入後複製

三、其他相容技巧(再囉嗦)

#1, FF下給p 設定padding 後會導致width 和height 增加, 但IE不會.(可用! important解決)

2, 居中問題.

1).垂直居中.將line-height 設定為目前p 相同的高度, 再透過vertical-align: middle.( 注意內容不要換行.)

2).水平居中. margin: 0 auto;(當然不是萬能)

3, 若需給a 標籤內內容加上樣式,需要設定display: block;(常見於導航標籤)

4, FF 和IE 對BOX 理解的差異導致相差2px 的還有設為float的p在ie下margin加倍等問題.

5, ul 標籤在FF 下面預設有list-style 和padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容清單)

6, 作為外部wrapper 的p 不要定死高度, 最好還加上overflow: hidden.以達到高度自適應.

7, 關於手形遊標. cursor: pointer.而hand 只適用於IE.

P.S 至於IE5以及其他瀏覽器就沒有必要兼顧了. 在這上面花時間不值得.

以上是JavaScript開發之網頁相容各種瀏覽器的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！