CSS HACK

IE6 , IE7 only

#bg{
  * background:#FFF;
}

IE7, IE8, IE9 only

#bg{
  background:#FFF \9;
}

IE7 only

*+#bg{
  background:#FFF;
}

IE6 only

#bg{
  _background:#FFF;
}

IE8 only 
@media \0screen {
  #bg{margin-top:-15px;}
}

IE9 only
:root #bg{

color: #F00\9;

}

FF6 FF7

  html>/**/body #bg, x:-moz-any-link, x:default {
background:#FFF;
}

判斷 win7 並 FF only
在win7 和 winXP firefox 會有css誤差 , 所以在頁尾判斷出作業系統 , 在使用FF only的CSS Hack

if(navigator.oscpu == "Windows NT 6.1"){
  document.write('<style>html>/**/body #bg, x:-moz-any-link, x:default { margin-top:-20px; }</style>');
}

background 屬性

背景透明化


body {background:transparent;}


背景圖固定最上層


body {background-attachment: fixed;
background-image: url("bk.jpg");
background-repeat: no-repeat;
}


背景圖位移

在 position 控制值分別為 {上下} {左右} ,
可用 center 或 50px 等控制顯示方式

方式 1


body { background-image: url("bk.jpg");
background-repeat: no-repeat;
background-position: center center;
}


方式 2


body{background:url(bk.jpg) 5px 10px no-repeat; }


table 表格框線

使用 table border 的框線無法表現出細框的效果,可加入css語法

css語法


table {
border: 1px solid #000;
border-collapse: collapse;
}
tr, td {
border: 1px solid #000;
}


顯示範列

1	2	3
4	5	6

css - 文字 分散對齊

html 想做出 Doc 分散對齊效果 for ie

css 語法


.justify{
text-align: justify;
text-justify :inter-ideograph;
width:200px;
border:1px solid #CCCCCC;
padding:5px;
}



顯示效果

測試文章
文測試文測試文章
測試文章