CSS兼容

1、CSS写color时不要用英文单词写，要用#ffffff这类格式，否则在各个浏览器下的显示效果不一样。

2、IE的背景包括边框，要用*width来调整，前面加*只有ie能识别，_width ie6识别，*width IE7识别

3、ie6浮动有双倍外边距，所以能用padding就一定用padding。

4、要用z-index，必须position设置除static的属性值。

5、小图标用背景图实现

p{ width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

用 js 实现文字超出字符数自动截断并显示“...”

<script>

window.onload = function(){

function csubstr(str,len){

if(str.length>10){

return str.substring(0,len)+"...";

}else{

return str;

}

}

ss = document.getElementsByTagName('p');

for(var i=0;i<ss.length;i++){

ss[i].innerHTML = csubstr(ss[i].innerHTML,117);

}

}

</script>

String.prototype.cutstr=function (len){

if(str.length>len){

return str.substring(0,len)+"...";

}else{

return str;

}

}

$(obj).text().cutstr(10); text可用html代替

$(obj).val().cutstr(10); 表单用val

规定段落中的文本不进行换行：p{white-space: nowrap}

设置段落的最小宽度：p{min-width:100px;}

　设置h1元素的字母间距：h1{letter-spacing:-3px}

list-style-image图像与文字不能对齐，可以不用 list-style-image，而用 background-image 把图片作为 li 的背景，并设置背景不重复，同时设置文本内间距

让文本在DIV自动换行，只要在div的CSS加上word-break:break-all;word-warp:warp;overflow:auto;

谷歌浏览器限制了字体最小显示大小，解决：Chrome 是 Webkit 的内核，有一个 -webkit-text-size-adjust 的私有 CSS 属性，-webkit-text-size-adjust:none;

IE6设置input无边框 input{border:none;border:red;}

设置button中的文字垂直居中button{height:20px;line-height:20px;}

设置表单元素高度一样全部加float属性即可

在li里插入浮动元素产生的3px的bug:

1. 给li添加float属性，属性值可以是除none外的任意值
2. 给li添加vertical-align属性，属性值可以是任意值