DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> css代碼兼容浏覽器技巧總結
css代碼兼容浏覽器技巧總結
編輯:布局實例     

   解決CSS的浏覽器兼容性問題,多年切圖工作的總結:)

  /* 統一各個浏覽器下 外邊距margin、內填充padding的默認值 */

  html,body,a,h1,h2,h3,h4,h5,h6,p,div,ul,li,ol,dl,dt,dd,img,form,input,textarea,select,fieldset { margin:0px; padding:0px }

  /* 統一標題公共樣式 text-shadow:gray 0px 0px 5px; 文字陰影 font-weight:800 平滑的加粗 */

  h1,h2,h3,h4,h5,h6,b,strong { font-family:Arial,Verdana,sans-serif; font-weight:800 }

  /* 網頁公用的屬性: 字體、文字顏色、背景色等 */

  body,table,input,select,textarea { font-family:SimSun, "宋體", Arial; font-size:12px; }

  body, table { background-color:white }

  body { color:#636363; font-size:12px }

  /* 控制英文字符連續自動換行 */

  div,span,th,td,dt,dd,h1,h2,h3,h4,h5,h6,em,strong,i,a,b,a,p { word-break:break-all; word-wrap:break-word; }

  ul,ol,dl { list-style-type:none }

  select,input,select { vertical-align:middle }

  img { border:0 none; text-align:absmiddle; background-color:transparent }

  /* 表格居中顯示 */

  table { margin-left:auto; margin-right:auto; border-width:0 none }

  /* 默認鏈接的樣式設置 */

  a { color:#000; text-decoration:none }

  a:hover { text-decoration:underline }

  /* 去a虛線框 cdl: clear dotted line */

  .cdl, a:active { outline:none; blr:expression(this.onFocus=this.blur()) }

  :focus { outline:none } /* for Firefox */

  /* 清浮動 */

  .clear { display:block !important; clear:both; height:0px; line-height:0px; font-size:0 }

  /* 常用,采用單詞首字母縮寫方式命名:保持良好的命名風格很重要 :) */

  .tdn { text-decoration:none } /* 鏈接無下劃線 */

  .ofh { overflow:hidden } /* 溢出隱藏 */

  .tal { text-align:left } /* 內容左對齊 */

  .tar { text-align:right } /* 內容右對齊 */

  .tac { text-align:center } /* 內容居中 */

  .fl { float:left } /* 左浮動 */

  .fr { float:right } /* 右浮動 */

  .m0a { margin:0 auto } /* 容器內水平居中 */

  .bn { border:0 none !important; } /* 無邊框 */

  3、技巧積累(持續補充...)

  1)利用 margin: 0 auto; 實現水平居中,必須同時定義容器的寬度(width)才會有效果;

  2)關於Border的寫法,如果您想定義div的四個邊的顏色不同,而粗細和樣式都一樣,您可以這樣寫:

  div.border2 { border:1px solid; border-color:color1 color2 color3 color4 }

  四種顏色依次是上,右,下,左的顏色

  3)兼容所有的浏覽器都可以顯示半透明效果的寫法

  .alpha50 {

  filter: alpha(opacity=50); /* 支持 IE 浏覽器 */

  -moz-opacity: 0.5; /* 支持 FireFox 浏覽器 */

  opacity: 0.5; /* CSS標准.該屬性支持firefox, Safari和 Opera */

  }

  4)使用media指令引入兩種CSS:打印版本的css和屏幕顯示的css

  5)我們可以使用page-break-after,page-break-before控制打印時的分頁

  6)使用縮進(text-indent)顯示圖片,而隱藏文字(對SEO友好)

  .logo { background: url(xxx.gif) no-repeat; width:160px; height:60px; text-indent: -2000px; }

  < h1 class="logo" > 在售產品 < / h1 >

  7)100%的高度

  為了讓 < div id="content" >< /div > 容器自動延伸到整個頁面的高度,我們需要告訴和容器高度應為整個頁面的高度。

  html { min-height: 100%; _height:100%; }

  body { margin: 0; padding: 0; min-height: 100%; _height:100%; }

  #content { padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana; width: 960px; min-height: 100%; _height:100%; }

  8)跨浏覽器的盒陰影效果實例頁面

  .shadow {

  -moz-box-shadow: 3px 3px 4px #000;

  -webkit-box-shadow: 3px 3px 4px #000;

  box-shadow: 3px 3px 4px #000;

  /* For IE 8 */

  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

  /* For IE 5.5 - 7 */

  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

  }

  9)哀悼日網站灰化CSS代碼

  html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved