xhtml+css基本知識

標籤：style   http   color   io   os   java   ar   strong   for   

1. 文字強制不換行,多餘部分用省略符號代替
white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
2. Firefox，<textarea>禁止拖拽拉動
resize:none; 或者 min-width:;max-width:;min-height:;max-height:;
3. Firefox，<label>放入多個input, text需要多次點擊才可以打字，radio則無法實現單選
改用<p></p>標記書寫
4. <a> 標記去除虛線框
a{outline:none;blr:expression(this.onFocus=this.blur());}
5. <img>下方出現5px空白
img{display:block;}
6. banner圖片滿屏置中顯示
<div>
<img />
</div>
div {position:relative;overflow:hidden;height:200px;text-align:center;}
div img{position:absolute;left:50%;top:0;margin-left:-1250px;}
(注意：margin-left:所得到的值是img的尺寸除以2。)
7. 背景透明
filter:alpha(opacity=80);opacity:0.8;
8. <p></p>可在網頁上直接更改內容,規定是否允許使用者編輯內容
Contenteditable=“true”
9.input失去焦點文字消失
<input type="text" value="請輸入使用者名稱" class="in_serch" />
10.placeholder 設定顏色
input::-webkit-input-placeholder{ color:#4c535d;}
input::-moz-placeholder { color:#4c535d;}
11.chrome下input[type=text]的placeholder不垂直置中解決辦法
把line-height設定為normal;
12.input預設屬性
-webkit-appearance:none
outline:none;
13.字型大小縮寫
font:400 14px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei"

萬惡的IE6及各類疑難雜症：

IE6 PNG陰影問題：
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘toalogin/sj.png‘);

display:inline-block 空白間距解決方案：
.dib-wrap {
font-size:0;/* 所有瀏覽器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 會導致脫離普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支援字型大小為 0 的瀏覽器, N 根據父級字型調節*/
}
.dib {
display: inline-block;
*display:inline;
*zoom:1;
}

取消IE6 下點擊後的虛線框
a{outline:none;blr:expression(this.onFocus=this.blur());}

IE6調試：
<script type="text/javascript" src="http://stg.pa18.com/pa18shopahhs/_test/firebug-lite-1.4/firebug-lite.js"></script>

設定固定大小：
window.open(‘queryGuaranteeDetail.jsp‘,‘newwindow‘,‘height=700, width=800, top=5, left=0, toolbar=no, menubar=no, scrollbars=yes, resizable=yes,location=no, status=no‘)

css hack:
“_” IE6專屬hack
“+” IE7專屬hack
"*" IE

純css實現箭頭效果：
.triangle{
display:inline-block;
width:0;
height:0;
overflow:hidden;
vertical-align:middle;
border-width:10px 10px 0 10px;
border-color:#000 transparent transparent transparent;
border-style:solid dashed none dashed;
}

透明度：
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

 

xhtml+css基本知識