首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css技艺

2012-11-05 
css技巧1. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器li{width:200pxwhite-space:n

css技巧
1. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器
   

  li{          width:200px;            white-space:nowrap;      text-overflow:ellipsis;      -o-text-overflow:ellipsis;      overflow: hidden;      } 

2. div的垂直居中问题 vertical-align:middle;
   将行距增加到和整个DIV一样高 line-height:200px;
   然后插入文字,就垂直居中了。缺点是要控制内容不要换行
   IE需要设定body居中,首先在父级元素定义text-algin: center;
   这个的意思就是在父级元素内的内容居中。    

3. margin加倍的问题    
   设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
   解决方案是在这个div里面加上display:inline;   
  例如: 
 
<#div id=”imfloat”>    

  相应的css为   
   #IamFloat{       float:left;       margin:5px;  /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}  


4.清除层浮动后,后面的层margin-top不起作用
  <param name="wmode" value="transparent" />
6. 游标手指cursor
   cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

7.FireFox下如何使连续长字段自动换行
  众所周知IE中直接使用 word-wrap:break-word 就可以了
  FF中我们使用JS插入的方法来解决
 
 div {      width:300px;      word-wrap:break-word;      border:1px solid red;     } 
 
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<scrīpt type="text/javascrīpt"> /* <![CDATA[ */ function toBreakWord(el, intLen){      var ōbj=document.getElementById(el);      var strContent=obj.innerHTML;      var strTemp="";      while(strContent.length>intLen){          strTemp+=strContent.substr(0,intLen)+"&#10;";          strContent=strContent.substr(intLen,strContent.length);      }      strTemp+="&#10;"+strContent;      obj.innerHTML=strTemp; } if(document.getElementById   &&   !document.all)   toBreakWord("ff", 37); /* ]]> */ </scrīpt> 


8.超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题。
  <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>  

热点排行