CSS兼容
1、CSS写color时不要用英文单词写,要用#ffffff这类格式,否则在各个浏览器下的显示效果不一样。
2、IE的背景包括边框,要用*width来调整,前面加*只有ie能识别,_width ie6识别,*width IE7识别
3、ie6浮动有双倍外边距,所以能用padding就一定用padding。
4、要用z-index,必须position设置除static的属性值。
5、小图标用背景图实现
用 CSS 实现单行文字超出自动截断并显示“...”
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:
- 给
li
添加float
属性,属性值可以是除none
外的任意值 - 给
li
添加vertical-align
属性,属性值可以是任意值