偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

CSS中hack和注釋書寫規(guī)范

開發(fā) 前端
本文向大家描述一下CSS中hack和注釋書寫規(guī)范,因?yàn)椴煌瑸g覽器對(duì)W3C標(biāo)準(zhǔn)的支持不一樣,各個(gè)瀏覽器對(duì)于頁面的解釋呈視也不盡相同,就需要利用css的hack來進(jìn)行調(diào)整。

你對(duì)CSS中hack和注釋書寫規(guī)范是否熟悉,這里和大家分享一下,由于各個(gè)瀏覽器對(duì)于頁面的解釋呈視不盡相同,就需要利用css的hack來進(jìn)行調(diào)整,另外說一下注釋的概念,注釋主要包括單行注釋和整段注釋。

CSS中hack和注釋書寫規(guī)范

一.hack書寫規(guī)范

因?yàn)椴煌瑸g覽器對(duì)W3C標(biāo)準(zhǔn)的支持不一樣,各個(gè)瀏覽器對(duì)于頁面的解釋呈視也不盡相同,比如IE在很多情況下就與FF存在3px的差距,對(duì)于這些差異性,就需要利用css的hack來進(jìn)行調(diào)整,當(dāng)然在沒有必要的情況下,***不要寫hack來進(jìn)行調(diào)整,避免因?yàn)閔ack而導(dǎo)致頁面出現(xiàn)問題。

1、IE6、IE7、Firefox之間的兼容寫法:

◆寫法一:

IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*;
IE6能識(shí)別*,但不能識(shí)別!important,
IE7能識(shí)別*,也能識(shí)別!important;
FF不能識(shí)別*,但能識(shí)別!important;
根據(jù)上述表達(dá),同一類/ID下的CSS hack可寫為: 

  1. .searchInput{  
  2. background-color:#333;/*三者皆可*/  
  3. *background-color:#666 !important;/*僅IE7*/  
  4. *background-color:#999;/*僅IE6及IE6以下*/  
  5. }  
  6.  

一般三者的書寫順序?yàn)椋篎F、IE7、IE6.

◆寫法二:

IE6可識(shí)別“_”,而IE7及FF皆不能識(shí)別,所以當(dāng)只針對(duì)IE6與IE7及FF之間的區(qū)別時(shí),可這樣書寫: 

  1. .searchInput{  
  2. background-color:#333;/*通用*/  
  3. _background-color:#666;/*僅IE6可識(shí)別*/  
  4. }  
  5.  

◆寫法三:

*+html與*html是IE特有的標(biāo)簽,Firefox暫不支持。 

  1. .searchInput{background-color:#333;}  
  2. *html.searchInput{background-color:#666;}/*僅IE6*/  
  3. *+html.searchInput{background-color:#555;}/*僅IE7*/  

屏蔽IE瀏覽器:

select是選擇符,根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的。

  1. *:lang(zh)select{font:12px!important;}/*FF的專用*/  
  2. select:empty{font:12px!important;}/*safari可見*/  
  3.  

IE6可識(shí)別:

這里主要是通過CSS注釋分開一個(gè)屬性與值,注釋在冒號(hào)前。

select{display/*IE6不識(shí)別*/:none;}

◆IE的if條件hack寫法:

所有的IE可識(shí)別:

OnlyIE
只有IE5.0可以識(shí)別:
OnlyIE5.0
IE5.0包換IE5.5都可以識(shí)別:
OnlyIE5.0+
僅IE6可識(shí)別:
OnlyIE6-
IE6以及IE6以下的IE5.x都可識(shí)別:
OnlyIE6/+
僅IE7可識(shí)別:
OnlyIE7/-#p#

2、清除浮動(dòng):

在Firefox中,當(dāng)子級(jí)都為浮動(dòng)時(shí),那么父級(jí)的高度就無法完全的包住整個(gè)子級(jí),那么這時(shí)用這個(gè)清除浮動(dòng)的HACK來對(duì)父級(jí)做一次定義,那么就可以解決這個(gè)問題。 

  1. select:after{  
  2. content:”.”;  
  3. display:block;  
  4. height:0;  
  5. clear:both;  
  6. visibility:hidden;  
  7. }  

二.注釋書寫規(guī)范

1、行間注釋:

直接寫于屬性值后面,如: 

  1. .search{  
  2. border:1pxsolid#fff;/*定義搜索輸入框邊框*/  
  3. background:url(../images/icon.gif)no-report#333;/*定義搜索框的背景*/  
  4. }  
  5.  

2、整段注釋:

分別在開始及結(jié)束地方加入注釋,如: 

  1. /*=====搜索條=====*/  
  2. .search{  
  3. border:1pxsolid#fff;  
  4. background:url(../images/icon.gif)no-repeat#333;  
  5. }  
  6. /*=====搜索條結(jié)束=====*/  
  7.  

【編輯推薦】

  1. 輕松玩轉(zhuǎn)CSS樣式屬性代碼縮寫
  2. 深入剖析CSS層疊與繼承的使用
  3. 專家推薦三大“***”CSS技巧!
  4. 探究網(wǎng)頁布局中CSS無效的十個(gè)常見原因
  5. DIV CSS初學(xué)者必須掌握的10個(gè)問題與技巧

 

責(zé)任編輯:佚名 來源: 52css.com
相關(guān)推薦

2017-07-20 11:11:39

前端CSS書寫規(guī)范

2010-08-31 11:25:15

2010-09-01 09:59:32

CSS

2011-07-08 10:01:05

PHP

2010-09-01 10:27:12

CSS

2011-03-21 13:53:45

數(shù)據(jù)庫開發(fā)書寫規(guī)范

2010-09-15 16:19:17

IECSS hack

2009-07-23 10:40:23

CSS書寫技巧

2010-09-15 15:48:09

CSS Hack

2010-09-07 13:04:14

CSS Hack

2010-09-16 14:09:03

CSS hackGoogleChrom

2010-09-16 11:31:17

CSS Hack

2010-09-15 15:39:03

CSS hack

2011-04-07 10:29:21

數(shù)據(jù)庫編程書寫規(guī)范

2020-04-16 21:02:35

前端命名規(guī)范html規(guī)范

2010-09-13 10:00:51

CSS注釋

2010-08-27 17:48:38

CSS

2010-09-15 15:59:11

CSS hack

2010-08-30 15:40:31

CSS瀏覽器兼容

2021-05-06 07:26:55

CSS 文字動(dòng)畫技巧
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)