文字内容自动换行
word-wrap:break-word;FF
white-space:normal; word-break:break-all; IE
=================================
textarea的wrap属性
textarea中有个wrap属性,该属性值有off, wrap, virtual, physical;
设为off时,是默认运作;会出现滚动条;
而设置virtual,physical会自动换行,这两者的区别是,当提交到服务器上时virtual始终只一行字符,直到人为换回车;而physical则是看到几行就是几行。
wrap再看起什么作用的。
=======================================
DIV图像居中
图像水平居中很容易与文本居中一样用text-align:center属性,只是注意显示给出外框元素的宽度属性.
图像垂直居中:
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
}
===图片作为背景图居中
div {
width:500px;border:1px solid #666;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
======================================
IE6下select无法被div挡住
这个bug老早就发现了,只由于发生在IE6下,所以就一直没深入研究。最近测试老反应在IE6下,select无法被挡,所以就动手解决了下。
常用方法有两种,第一是当触发弹层(多数以弹层方式)时候,通过js把select隐藏,第二种是通过iframe来遮挡select。这里我采用了第二种方法,其基本原理是div可以挡iframe,而iframe可以挡select。
<div class="popmsg" id="popmsg"> //弹层
</div>
<div id="popmsgbg"></div> //遮罩层
<iframe id="ifr" scrolling="no" frameborder="0"></iframe> //iframe
当触发弹层时,显示iframe并通过js设置它的width、height、top、left与弹层的相同,z-index的值比弹层小即可。