主题：关于CSS细节集合(一)

一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：

1
<li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li>

二、当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：

1
<li>记住密码<img src="static/img/xyx.jpg" align="middle"/></li>

三、更改IE“查看源代码”菜单打开的编辑器

  1. 打开注册表编辑器,在开始-运行中输入regedit前端UI分享
  2. 找到以下位置： 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> 之间加入：

1
2
3
4
<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的值。 前端UI分享
1
2
3
4
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>区域中 前端UI分享
  3. js自动刷新页面：
1
2
3
4
5
6
7
<script language="JavaScript">
function myrefresh()
{
       window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>

一、IE6及以下不识别a 标签外的:hover伪类，在火狐，IE7里能正确达到效果，解决办法：

.代码  收藏代码
  1. #show li.s1{ border:1px solid #ff9900; background:#454242;}  
  2. #show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}  

 

二、为元素设置hasLayout

很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。

三、IE6下字符重复出现

确保浮动元素设置了 display:inline;

在浮动元素中使用 margin-right:-3px;前端UI分享

四、样式优先级

1，内联样式 [1.0.0.0]
2，ID选择器 [0.1.0.0]
3，类，属性，伪类 选择器 [0.0.1.0]
4，元素标签，伪元素 选择器 [0.0.0.1]

五、一个元素垂直居中的css写法

.代码  收藏代码
  1. #exm{  
  2.     position:absolute;  
  3.     left:50%;  
  4.     top:50%;  
  5.     z-index:1;  
  6.     width:200px;  
  7.    
  8.     height:100px;  
  9.     margin-left:-100px;  
  10.     margin-top:-52px;  
  11. }  

 

六、zoom : normal | number

设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承，但是它会影响对象的所有子对象( children )。前端UI分享

七、图片跟文字并排时, 要实现图片文字垂直居中:

  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;

九、被点击访问过的超链接样式不在具有hover和active

解决方法：改变CSS属性的排列顺序: L-V-H-A

十、FF下连续长字段不能自动换行

解决方法：

.代码  收藏代码
  1. div{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;前端UI分享

十七、IE设置滚动条样式

解决办法：

.代码  收藏代码
  1. body{  
  2. scrollbar-face-color:#f6f6f6;  
  3. scrollbar-highlight-color:#fff;  
  4. scrollbar-shadow-color:#eeeeee;  
  5. scrollbar-3dlight-color:#eeeeee;  
  6. scrollbar-arrow-color:#000;  
  7. scrollbar-track-color:#fff;  
  8. scrollbar-darkshadow-color:#fff;  
  9. }  

 

十八、IE6无法定义高度为1px的容器

解决办法：

.代码  收藏代码
  1. div{  
  2. overflow:hidden;  
  3. zoom:0.8;  
  4. line-height:1px;  
  5. }  

一、让层显示在flash之上

解决办法：给FLASH设置透明<param name=”wmode” value=”transparent” />或者<param name=”wmode” value=”opaque” />

二、使一个层垂直居中浏览器中

解决办法：使用百分比绝对定位，与外补丁负值的方法。

.代码 
  1. {position:absolute;  
  2.     top:50%;  
  3.     left:50%;  
  4.     margin:-100px auto auto -100px;  
  5.     width:200px;  
  6.     height:200px;  
  7. }  
 

三、加入收藏夹前端框架分享

解决办法：

.代码 
  1. <script type="text/javascript">  
  2. // <![CDATA[  
  3. function bookmark(){  
  4. var title=document.title  
  5. var url=document.location.href  
  6. if (window.sidebar) window.sidebar.addPanel(title, url,"");  
  7. else if( window.opera && window.print ){  
  8. var mbm = document.create_r_rElement_x('a');  
  9. mbm.setAttribute('rel','sidebar');  
  10. mbm.setAttribute('href',url);  
  11. mbm.setAttribute('title',title);  
  12. mbm.click();}  
  13. else if( document.all ) window.external.AddFavorite( url, title);  
  14. }  
  15. // ]]>  
  16. </script>  
 
.代码 
  1. <a href="javascript:bookmark()">加入收藏夹</a>  
 

四、IE实现页面背景渐变（FF及chrome不支持）

从上到下：

.代码 
  1. body{filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}  
 

左上至右下：

.代码 
  1. body{  
  2. filte: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); skyblue;  
  3. }  
 

从左至右：

.代码 
  1. body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);}  
 

从上到下：

.代码 
  1. style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"  
 

五、border:none;与border:0区别

理论上的性能差异:

前端框架分享

border:0;把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。border:none;把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

兼容性差异：

兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

当border为“none”时似乎对IE6/7无效边框依然存在,当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可

六、css实现多列等高布局,正内边距与负外边距

给每个需要实现等高的列应用样式：

.代码 
  1. .e{padding-bottom:32767px;margin-bottom:-32767px;}  
 

七、display:inline-block;顾名思义，就是在内联情况下的块状，可以设定高度宽度。前端框架分享

.代码 
  1. .element-class {  
  2. display: -moz-inline-stack; //Firefox only code  
  3. display: inline-block; //some standard browsers  
  4. zoom: 1; //IE only  
  5. *display: inline; //Only IE know this code (CSS Hack)  
  6. }  
 

八、清理浮动

.代码 
  1. .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}  
  2. .clearfix {zoom:1;}  

 

九、文字用省略号截断

.代码 
  1. div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}  
 
posted @ 2014-09-03 10:46  pesserger  阅读(172)  评论(0)  编辑  收藏  举报