网站常见问题及解决方法(div/css)






18.<a> 在IE6,7 下面重新定义宽和高的代码:{ 
 display:block;
 display:-moz-inline-stack;
 display:inline-block;
 zoom: 1;
 overflow:hidden;
Test OK!



19.图片在IE6 下面有空隙产生:设置img为 display:block或vertical-align属性为:top,middle,bottom,text-bottom 可以解决; Test OK!


20.首字下沉(伪类):first-letter{ }


21.CSS背景透明:全透明代码:{background:transparent}


  半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;} 见26条




22.去掉点击链接时出现的虚线<a href="#" onfocus="this.blur()"></a>




23.三角样式
.test{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
斜角
.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}


说明:
以上的测试代码纯粹为了说明原理,所以使用#ffffff白色边框,通过于背景融合来隐藏边框。在实际的操作中,应该使用transparent透明属性,例如border-color:#ff3300 #ff3300 transparent transparent;,这同样会有问题,IE6浏览器不支持transparent透明属性,不过没有关系,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题,为什么使用dotted和dashed可以修复此问题呢?您有兴趣可以参见默尘的这篇文章Dotted&Dashed终极分析及IE6透明边框。


 <strong style="float: left; border-style: solid; border-width: 10px; border-color: #000 #fff #fff #fff; height:0"></strong>




24.<!-- 1个像素的高度 -->
div {background:red;overflow:hidden; zoom:0.08;line-height:1px;}


25.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。




26.最低高度(兼容IE6)
{
height:auto!important;
height:200px;
min-height:200px;
}


27. 给Flash设置透明属性可使层显示在Flash之上 
<param name="wmode" value="transparent" /> <!-- 解决IE上的问题 //> 
<embed wmode="transparent" …… > <!-- 解决FireFox上的问题 //> 

posted on 2014-04-08 15:42  云上2014  阅读(201)  评论(0编辑  收藏  举报