如何寫出相容性很好的頁面

2022-07-26 21:36:14 字數 2383 閱讀 6814

其實這跟 wcag 根本上連不上什麼直接關係,但為了乙個相容性更好,特別是向後相容的頁面,必須要把這個東西寫上:

學習的過程當中你就已經有些相容性的了,如果要用,除飛你只想讓該標籤的效果只在某些瀏覽器裡面有效果,特別是h5,現在好些標籤都沒有統一在所有瀏覽器有效。

清除標籤格式是必須的,因為大部分標籤都有相容性,但又必須使用,例如ul標籤在ie6,7下預設是有外邊距的,在ie8,火狐,谷歌下預設有內邊距。

例如:在巢狀div中,如果外層div沒有設定邊框,內層div的margin-top會無效,它會直接作用到外層div上(也就是外層div margin-top的效果了)

這種情況一般用如果方法處理:

1、給父元素加overflow:hidden; 但這種你要保證父元素以後沒有可顯示的元素,不然顯示不了哦。

left

right

div2

2、在最後乙個浮動子元素的後面加乙個清浮動的元素

left

right

div2

3、父級div定義 偽類:after 和 zoom

/*清除浮動***/ 

.clearfloat:after

.clearfloat

原理:ie8以上和非ie瀏覽器才支援:after,原理和方法2有點類似,zoom(ie轉有屬性)可解決ie6,ie7浮動問題 4、父元素也浮動 5、父級div定義 overflow:auto 6、父級div定義 display:table

left

right

div2

要想**相容性好,就好比建立房子,要想房子建得牢固,框架牢固才是根本,所以說要想**相容性好,框架結構一定要好,這樣擴充套件性也好,前台後台都乙個道理。

前台的框架應該怎麼建立呢,我覺得可以從如下方面注意:

有些同學排版的時候,當結構出現偏差的時候,就隨意給元素加定位或是浮動屬性,突然間發現好了,只能說是達到他所認為是視覺效果了,但網頁相容性好不好呢,自己就不得而知了。

這就有點類似於用殺豬刀殺雞,大材小用了,而且用得非常不合適,所以說,該用什麼的什麼再用什麼,不要動不動就定位呀,浮動什麼的。

盡量使用父子關係去定義,例如:#top .left img{},以後這樣擴充套件性也好,不會出現新class="left"與這個left衝突,只要id不要定義重複就ok。

其實這跟 wcag 根本上連不上什麼直接關係,但為了乙個相容性更好,特別是向後相容的頁面,必須要把這個東西寫上:

學習的過程當中你就已經有些相容性的了,如果要用,除飛你只想讓該標籤的效果只在某些瀏覽器裡面有效果,特別是h5,現在好些標籤都沒有統一在所有瀏覽器有效。

清除標籤格式是必須的,因為大部分標籤都有相容性,但又必須使用,例如ul標籤在ie6,7下預設是有外邊距的,在ie8,火狐,谷歌下預設有內邊距。

例如:在巢狀div中,如果外層div沒有設定邊框,內層div的margin-top會無效,它會直接作用到外層div上(也就是外層div margin-top的效果了)

這種情況一般用如果方法處理:

1、給父元素加overflow:hidden; 但這種你要保證父元素以後沒有可顯示的元素,不然顯示不了哦。

left

right

div2

2、在最後乙個浮動子元素的後面加乙個清浮動的元素

left

right

div2

3、父級div定義 偽類:after 和 zoom

/*清除浮動***/ 

.clearfloat:after

.clearfloat

原理:ie8以上和非ie瀏覽器才支援:after,原理和方法2有點類似,zoom(ie轉有屬性)可解決ie6,ie7浮動問題 4、父元素也浮動 5、父級div定義 overflow:auto 6、父級div定義 display:table

left

right

div2

要想**相容性好,就好比建立房子,要想房子建得牢固,框架牢固才是根本,所以說要想**相容性好,框架結構一定要好,這樣擴充套件性也好,前台後台都乙個道理。

前台的框架應該怎麼建立呢,我覺得可以從如下方面注意:

有些同學排版的時候,當結構出現偏差的時候,就隨意給元素加定位或是浮動屬性,突然間發現好了,只能說是達到他所認為是視覺效果了,但網頁相容性好不好呢,自己就不得而知了。

這就有點類似於用殺豬刀殺雞,大材小用了,而且用得非常不合適,所以說,該用什麼的什麼再用什麼,不要動不動就定位呀,浮動什麼的。

盡量使用父子關係去定義,例如:#top .left img{},以後這樣擴充套件性也好,不會出現新class="left"與這個left衝突,只要id不要定義重複就ok。

頁面的相容性從認識開始

今天為了css的布局的遊覽器相容性調整了一晚上,怎麼調怎麼不對,四處找資料和解決方案,無意中發現通過ide建立的頁面沒這個相容性問題,然後我就不停找原因和縮小範圍。最後,發現只發現有所區別,這是我以前寫網頁是很火大的一段文字,每次會情不自禁的刪掉,經過研究後發現,千萬不能小看。在遵循標準的任何web...

頁面解析度相容性處理

目前自己了解兩種辦法 function bodyscale bodyscale 如果想要不留空白,可以讓背景寬高都為100 鋪滿整個螢幕,然後讓中間的部分垂直居中對齊。寬高比例1.7777 1920x1080 1600x900 1360x768這個大概 1280x720 css3新增的元素,使用re...

該死的相容性

今天因為以前用vs2005開發的 發現了乙個小bug,於是備份原專案檔案後,用vs2008 beta2開啟.備份?不用,我自己做過了.公升級專案檔案到2008的格式?嗯,公升吧.公升級到.net 3.5?算了吧,等正式版出來了再說.好,vs告訴我一切順利,我於是更改了出錯的語句 新增乙個if語句,十...