CSS開發小結

最近做Web開發比較多，總結一下碰到的CSS技巧：

 

1、具有相容性的層透明問題

大部分的人都習慣用IE特有的filter來製作半透明的Div層，可是碰到其他瀏覽器的時候怎麼辦？每個瀏覽器都有自己的透明文法，用下面方法將它們相容起來是比較好的：

 

.layer{<br /> position: absolute;<br /> width: 100px;<br /> height:100px;<br /> top:0;<br /> left:0;<br /> z-index:10;<br /> filter:alpha(opacity=60); /*支援IE*/<br /> -moz-opacity:0.6; /*支援Firefox*/<br /> opacity:0.6; /*支援其他瀏覽器*/<br />}

 

2、字型置中問題

定義一個span或者label之後，字型預設都是貼上方邊界顯示的，要讓字型水平置中可以用text-align:center; 但是要讓字型垂直置中，只能用line-height盡量設定一個跟span高度差不多的值來達到置中的效果

 

3、span和label的寬度問題

有時候定義一個span或者label在樣式中設定了width:200px;可是實際上它們根據裡面的內容自適應了width，這個時候需要給樣式加上行塊級設定才能強制規定其寬度（即加上display:inline-block;）

 

4、圖片防止盜鏈

對於放在img標籤中的圖片，瀏覽時可以直接右鍵另存新檔圖片複製下來，如果不希望被盜用可以將圖片設定在某一個span的css屬性background-image中，不過同時也會犧牲一些瀏覽器對img標籤靈活特有的支援

 

5、html編輯器

自己做了一個html編輯器，原理有三種方式，比較傾向於使用iframe，然後設定其designMode='On';來達到可編輯的效果，其實替換選中部分的樣式，很多例子都使用pasteHtml替換的方式，我試了試document對象本身帶有的execCommand函數，可以使用簡單的代碼就達到同樣的效果(舉個簡單例子)

 

<iframe class="htmlEditor" id="htmlEditor" marginWidth="0" marginHeight="0"></iframe></p><p><button onClick="format('bold', '')">加粗</button></p><p><mce:script type="text/javascript"><!--<br />function format(what,opt){<br /> if (opt==null) htmlEditor.document.execCommand(what);<br /> else htmlEditor.document.execCommand(what,"",opt);</p><p> htmlEditor.focus();<br />}<br />// --></mce:script>