xhtml+css基本知识

1. 文字强制不换行,多余部分用省略号代替
white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
2. 火狐，<textarea>禁止拖拽拉动
resize:none; 或者 min-width:;max-width:;min-height:;max-height:;
3. 火狐，<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;
}