《CSS细节优化集合》由会员分享，可在线阅读，更多相关《CSS细节优化集合（11页珍藏版）》请在金锄头文库上搜索。
1、CSS细节优化集合细节1一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：记住密码二、当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：记住密码三、更改IE“查看源代码”菜单打开的编辑器1. 打开注册表编辑器,在开始-运行中输入regedit2. 找到以下位置： HKEY_LOCAL_MACHINESOFTWAREMicrosoftInternet ExplorerViewSourceEditorEditor Name修改默认的数据为D:Program FilesEmEditorEmEditor.exe3. 切换到IE中查看源代码就可以看到效果了。4. 如果ViewSourc
2、eEditorEditor Name项没有,可以自己新建。四、自动最大化窗口，在 与 之间加入：setTimeout(top.moveTo(0,0),5000);setTimeout(top.resizeTo(screen.availWidth,screen.availHeight),5000);五、window.opener 实际上就是用window.open打开的窗体的父窗体。比如在父窗体parentForm里面 通过 window.open(subForm.html),那么在subform.html中 window.opener就代表parentForm,可以通过这种方式设置父窗体的值或
3、者调用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刷新页面的方法：1history.go(0)2location.reload()3location=location4location.assign(location)5doc
4、ument.execCommand(Refresh)6window.navigate(location)7location.replace(location)8document.URL=location.href自动刷新页面的方法:1.页面自动刷新：把加入区域中2.页面自动跳转：把加入区域中3.js自动刷新页面function myrefresh()window.location.reload();setTimeout(myrefresh(),1000); /指定1秒刷新一次4.JS刷新框架a)刷新包含该框架的页面用parent.location.reload();b)子窗口刷新父窗口self
5、.opener.location.reload();(或刷新)c)刷新另一个框架的页面parent.另一FrameID.location.reload();七、用过CSS hack应该知道，用下划线命名是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示。八、IE条件注释写法除IE外都可识别 所有的IE可识别 只有IE5.0可以识别 九、CSS HACK 写法第一种：.div background:orange;*background:green !important;*bac
6、kground: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;二
7、、为元素设置hasLayout（？）很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。三、IE6下字符重复出现确保浮动元素设置了display:inline;在浮动元素中使用margin-right:-3px;四、样式优先级1，内联样式 1.0.0.02，ID选择器 0.1.0.03，类，属性，伪类 选择器 0.0.
8、1.04，元素标签，伪元素 选择器 0.0.0.1五、一个元素垂直居中的css写法#exmposition: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:设置
9、成图片的高度,或者图片父元素的高度.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:b
10、reak-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:e
11、llipsis; -o-text-overflow:ellipsis; overflow: hidden;七、文本不能垂直居中解决办法：行高和容器高度相等line-height=height；八、文本输入框和相邻的文本不能对齐解决办法：设置文本输入框vertical-align:middle;九、IE设置滚动条样式解决办法：bodyscrollbar-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:hiddenzoom:0.8line-height:1px细节4一、让层显示在flash之上解决办法：给FLASH设置透明或者二、使一个层
