<转>CSS大美集
一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：
<li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li>
二、当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：
<li>记住密码<img src="static/img/xyx.jpg" align="middle"/></li>
三、更改IE“查看源代码”菜单打开的编辑器
打开注册表编辑器,在开始-运行中输入regedit
找到以下位置： HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"Internet Explorer"View SourceEditor"Editor Name"修改默认的数据为"D:"Program Files"EmEditor"EmEditor.exe"
切换到IE中查看源代码就可以看到效果了。
如果View Source Editor"Editor Name项没有,可以自己新建。
四、自动最大化窗口，在 <body> 与 </body> 之间加入：
<SCRIPT language="javascript">
setTimeout('top.moveTo(0,0)',5000);
setTimeout('top.resizeTo(screen.availWidth,screen.availHeight)',5000);
</script>
五、window.opener 实际上就是用window.open打开的窗体的父窗体。
比如在父窗体parentForm里面 通过 window.open("subForm.html"),那么在subform.html中 window.opener
就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。
1,window.opener.test(); ---调用父窗体中的test()方法；
2,如果window.opener存在,设置parentForm中stockBox的值。
if (window.opener && !window.opener.closed)
{
window.opener.document.parentForm.stockBox.value = symbol;
}
六、刷新页面的方法
Javascript刷新页面的方法：
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href
自动刷新页面的方法:
1.页面自动刷新：把<meta http-equiv="refresh" content="20">加入<head>区域中
2.页面自动跳转：把<meta http-equiv="refresh" content="20;url=http://www.wyxg.com">加入<head>区域中
3.js自动刷新页面
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
4.JS刷新框架
a)刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>
b)子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a> )
c)刷新另一个框架的页面
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>
七、用过CSS hack应该知道，用下划线命名是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示。
八、IE条件注释写法
<!--[if !IE]>除IE外都可识别<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
九、CSS HACK 写法
第一种：
.div {
background:orange;
*background:green !important;
*background:blue;
}
第二种：
.div {
margin:10px;
*margin:15px;
_margin:15px;
}
第三种：
#div { color: #333; }
*+html #div { color: #999; }
* html #div { color: #666; }
细节2………………………………………………………………………………
一、IE6及以下不识别a 标签外的:hover伪类，在火狐，IE7里能正确达到效果，解决办法：
#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
<li></li>
二、为元素设置hasLayout
很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。
三、IE6下字符重复出现
确保浮动元素设置了 display:inline;
在浮动元素中使用 margin-right:-3px;
四、样式优先级
1，内联样式 [1.0.0.0]
2，ID选择器 [0.1.0.0]
3，类，属性，伪类 选择器 [0.0.1.0]
4，元素标签，伪元素 选择器 [0.0.0.1]
五、一个元素垂直居中的css写法
#exm{
position:absolute;
left:50%;
top:50%;
z-index:1;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-52px;
}
六、zoom : normal | number
设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承，但是它会影响对象的所有子对象( children )。
七、图片跟文字并排时, 要实现图片文字垂直居中:
1> 将line-height:设置成图片的高度,或者图片父元素的高度.
2> 再将图片的CSS设置vertical-align:middle;
八、li 元素中包含 a img 元素的时候，IE6下出现空白
解决方法 一
使 li 浮动，并设置 img 为块级元素
解决方法 二
设置 ul 的 font-size:0;
解决方法 三
设置 img 的 vertical-align: bottom;
解决方法 四
设置 img 的 margin-bottom: -5px;
细节3………………………………………………………………………………
一、被点击访问过的超链接样式不在具有hover和active
解决方法：改变CSS属性的排列顺序: L-V-H-A
二、FF下连续长字段不能自动换行
解决方法：word-wrap:break-word;overflow:hidden;
三、FF下父容器高度不能自适应
解决办法：清除子元素的浮动
四、IE下图片下方产生空隙
解决办法：定义img 为display:block，或vertical-align为top/bottom/middle/text-bottom
定义父容器的字体大小为零，font-size:0
五、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙
解决办法：相邻的非浮动元素也设置浮动；
浮动元素相对IE6定义_margin-right:-3px;
六、LI内容超长后以省略号显示
解决办法： white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;
七、文本不能垂直居中
解决办法：行高和容器高度相等line-height=height；
八、文本输入框和相邻的文本不能对齐
解决办法：设置文本输入框vertical-align:middle;
九、IE设置滚动条样式
解决办法：
body{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
十、IE6无法定义高度为1px的容器
解决办法：overflow:hidden
zoom:0.8
line-height:1px
细节4………………………………………………………………………………
一、让层显示在flash之上
解决办法：给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
二、使一个层垂直居中浏览器中
解决办法：使用百分比绝对定位，与外补丁负值的方法。
position:absolute;
top:50%;
left:50%;
margin:-100px auto auto -100px;
width:200px;
height:200px;
三、加入收藏夹
解决办法：<script type="text/javascript">
// <![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if( window.opera && window.print ){
var mbm = document.create_r_rElement_x('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();}
else if( document.all ) window.external.AddFavorite( url, title);
}
// ]]>
</script>
<a href="javascript:bookmark()">加入收藏夹</a>
细节5………………………………………………………………………………
1.常见新闻列表的写法：
<ul ";clear:both;height:0;}
.clearfix {zoom:1;}
3).在地址栏添加自定义图标
首先，我们需要预先制作一个图标文件，大小为16*16像素。文件扩展名为ico，然后上传到相应目录中。在HTML源文件“<head></head>”之间添加如下代码：<Link Rel=”ICON NAME” href=”http://图片的地址（注意与刚才的目录对应）”>，当然如果用户使用IE5或以上版本浏览时，就更简单了，只需将图片上传到网站根目录下，即可自动识别！
4). 在IE6中设置display:block的空容器一个较小高度时，如<p style=”height:1px;”></p>，会发现其高度不能小于某个值。解决方案：设置overflow:hidden。
5).文字用省略号截断
div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}