CSS

由於瀏覽器的開發商越來越多，關於css教程相容也是各位設計師，站長們討論的熱門話題了，下面我們總結了一些學用中的css相容問題的。1、div的垂直置中問題vertical—align:middle;將行距增加到和整個div一樣高line-height:200px;然後插入文字，就垂直置中了。缺點是控制內容不要換行2

 代碼如下 複製代碼 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html

CSS樣式表的常用最佳化技巧和提示，可以大大提高網頁開發效率和更符合w3c標準。　　一、使用css縮寫 　　使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫文法總結》，這裡就不展開描述。　　二.明確定義單位，除非值為0　　忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width=100，但是在CSS中，你必須給一個準確的單位，比如:width:100px width:100em。只有兩個例外情況可以不定義單位:

vertical-align是個不錯的屬性，但是這個屬性起初是針對錶格的cell的。當然這個屬性雖然對區塊層級元素不起作用，但是對行內元素比如span還是有作用的（這時候，這個屬性設定為負值元素內容就下移，正值則上移）。　　下面是比較專業的垂直置中的集中解決方案。記錄於此，以便查閱。1、單行垂直置中　　文字在層中垂直置中vertical-align 屬性是做不到的.我們這裡有個比較巧妙的方法就是:設定height的高度與line-height的高度相同! example source

 代碼如下複製代碼 <style> .Nav { } .Nav li{   float:left;   display:block;   position:relative; } .Nav a{   float:left;   display:block;   position:relative;   padding:2px 10px 2px 10px;   font-size:13px;

　　CSS浮動模型可以說是標準布局中不可或缺的組成部分，可是對於浮動模型在IE6的表現癥狀你是否已經完全瞭解或者掌握呢？如果你的答案是肯定的，那恭喜你不用聽我的嗦了，如果你的答案是模糊的，那麼下面的討論或許對你以後的學習有所協助。　　首先看一下W3C對浮動模型部分解釋（http://www.w3.org/TR/REC-CSS2/visuren.html）：　　Since a float is not in the flow,&

　　css可以處理16,777,216顏色，可以使用名字、rgb值或十六進位代碼。red紅色等同於rgb(255,0,0)等同於rgb(100%,0%,0%)等同於#ff0000等同於#f00　　有17個預先確定的顏色，它們是：　　aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, 　　olive, orange, p

一、添加列印樣式1. 為螢幕顯示和列印分別準備一個css檔案，如下所示：  用於螢幕顯示的css： <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />  用於列印的css：<link rel="stylesheet"

　　優先權問題其實就是一個衝突解決的問題，當同一個元素(或內容)被CSS選擇符選中時，就要按照優先權取捨不同的CSS規則，這其中涉及到的問題其實很多。　　首先就是CSS規則的specificity(特殊性)，CSS2.1有一套關於specificity的計算方式，用一個四位的數字串(CSS2是三位)來表示，最終specificity越高的規則越特殊，在優先順序判定時也就越有優勢。關於specificity的具體計算在各種情況下的數字加成有如下一般規則：　　◎ 每個ID選擇符(#some

按照我們對CSS優先權的理解，最後定義的 CSS 樣式將會覆蓋在其之前定義的所有已經存在、或與之衝突的樣式，比如下面這個例子：  代碼如下複製代碼 p { color: red; background: yellow }p { color: green }

給長地址的儲存格應用樣式：  代碼如下複製代碼 word-wrap: break-word;word-break:break-all;<td style="word-wrap: break-word;word-break:break-all;" width="200"></td> 對於div1.（IE瀏覽器）white-space:normal; word-break:break-all;這裡前者是遵循標準。

　　　　大家在編寫CSS的時候可能認為記事本並不是最棒的，有什麼css編輯工具可以提高我們編碼的效率呢？　　TopStyle是我一直用的CSS編輯工具，最開始就是瞎用也沒有仔細研究過，不過後來把裡面的功能仔細看了看發現它的功能真是太強大了！　　在這裡分享一下使用經驗，我在編輯CSS時常用的快速鍵：

在項目開發過程中可能經常也會遇到file控制項，但是這個控制項比較另類，能夠修改的屬性不多，而且樣式外觀各個瀏覽器的表現也不一樣。通常都是不建議類比的，有時候產品很執著說為了統一風格還是希望要去類比下，好吧，出發點都是好的，能做就做吧。也沒想象的那麼困難，只是覺得沒太大的必要。看到很多群裡面有很多人問起過，很多人的解決方案都不怎麼簡潔，還用Js來控制了，很麻煩的說。後來我就想了下用把file空間透明度調到0的假象來達到類比的效果，做發就是file控制項用一個div包起來，然後這個div設定背景，

這就是ie6、ie7 的bug。解決方案：當父元素的直接子項目或者下級子項目的樣式擁有position:relative屬性時，父元素的overflow:hidden屬性就會失效。我們在IE 6 7內發現子項目會超出父元素設定的高度，即使父元素設定了overflow:hidden。解決這個bug很簡單，在父元素中使用position:relative;即可解決該bug。例子  代碼如下複製代碼 <style type="text/css">

　　在使用CSS實現表現的時候，會經常接觸到display:inline-block這一屬性，無論是初接觸Web標準還是接觸標準已久的朋友，大都會對這一屬性感覺很迷惑和模糊。display:inline-block

本例子在FireFox和IE6.0上通過測試，效果一樣<style>#idDIV{font-family:verdana,tahoma;font-size:12px ; list-style: disc inside;line-height:18px; margin-left:10px;}#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px&n

 代碼如下複製代碼 css製作漂亮樣式按鈕.buttoncss {background: #E8F4FF url(../Images/bluebuttonbg.gif);border: 1px #003399 solid;border-bottom: #93BEE2 1px solid;border-left: #93BEE2 1px solid;border-right: #93BEE2 1px solid;border-top: #93BEE2 1px

將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。按照這個解釋：支援的瀏覽器有（ie8,ie9,chrome,firefox3.6+,由於我是用firefox3.6測試的） ，ie6，ie7 是不支援這個屬性的。ie6,7 如何支援這個屬性呢？對於區塊層級元素，直接讓區塊層級元素成行內元素， 然後再觸發layout。

在ff2,ie7,ie6下測試通過,這款css教程 input file 檔案選擇框美化 支援firefox效果我想很不錯的。  代碼如下複製代碼 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html

你可以下面代碼儲存成js.檔案//定義全域變數 var timeout; $(document).ready(function(){ //找到所有的li標籤 $("li").each(function(index){$(this).mouseover(function(){ //滑動門都要設定一個延遲時間，避免使用者瘋狂移動滑鼠，導致伺服器崩潰，這個很重要 timeout =setTimeout(function(){