css兼容问题集锦

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cyzshenzhen/article/details/22716383

BEGIN;

 

 

1、文本框很大,导致里面的内容不居中、以及内容为数字时,不支持text-indent属性
解:line-height: K px; (值为文本框的height值)。

2、文本框有背景图片。左边带有小图标(如手机号码,左边会有一个手机的图标),文本输入内容要在图标后面开始
解:text-align: start; text-indent: K px;

3、当文本框使用text-indent: K px;时,IE6会使得文本框向右 K 个像素。
解:display:block;

4、使用img标签,当图片很小的时候,IE浏览时会很难看,以及在input使用背景图片时,会出现边框
解:border: 0px;

5、CSS模拟圆角边框
大型:
<style type="text/css">
/*圆角边框开始*/
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1{display:block;overflow:hidden;height:1px;margin:0 5px;background:#77cce7;}
.xb2 {display:block;overflow:hidden;height:1px;border-left:1px solid #77cce7;border-right:1px solid #77cce7;margin:0 3px;border-width:0 2px;}
.xb3 {display:block;overflow:hidden;height:1px;border-left:1px solid #77cce7;border-right:1px solid #77cce7;margin:0 2px;}
.xb4 {display:block;overflow:hidden;border-left:1px solid #77cce7;border-right:1px solid #77cce7;height:2px;margin:0 1px;}
/*圆角边框结束*/
</style>

<div class="items">
  <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

小型:
<style type="text/css">
/*圆角边框开始*/
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1{display:block;overflow:hidden;height:1px;margin:0 3px;background:#77cce7;}
.xb2 {display:block;overflow:hidden;height:1px;border-left:1px solid #77cce7;border-right:1px solid #77cce7;margin:0 2px;border-width:0 1px;}
.xb3 {display:block;overflow:hidden;border-left:1px solid #77cce7;border-right:1px solid #77cce7;height:2px;margin:0 1px;}
/*圆角边框结束*/
</style>

<div class="items">
  <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b></b>
<b class="xbottom"><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

微型:
<style type="text/css">
/*圆角边框开始*/
.xtop, .xbottom {display:block;background:transparent;font-size:1px;}
.xb1{display:block;overflow:hidden;height:1px;margin:0 3px;background:#77cce7;}
.xb3 {display:block;overflow:hidden;border-left:1px solid #77cce7;border-right:1px solid #77cce7;height:2px;margin:0 1px;}
/*圆角边框结束*/
</style>

<b class="xtop"><b class="xb1"></b><b class="xb3"></b></b>
<b class="xbottom"><b class="xb3"></b><b class="xb1"></b></b>

6、IE6空div默认是20px高度
解:设置文字大小为1px。   即:font-size: 1px;

7、tab切换js优化(一般tab切换,都是foreach循环所有的列,进行改为未选中,然后再选择this为已选中)
解:可通过指定样式解决循环问题。
$('.c_tab_select').addClass('c_tab_unselect').removeClass('c_tab_select');
$(this).removeClass('c_tab_unselect').addClass('c_tab_select');

8、IE9及以下IE版本浏览器 margin: x x x x;不支持
解:没办法,一个一个写  margin-top: x px;  ...

9、div嵌套引起的margin-top不起作用
原因:有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
解:1、在父层div加上:overflow:hidden;
2、把margin-top外边距改成padding-top内边距 ;

 

END;

--- --- --- ---> 点击查看更多最新原创博文<--- --- --- ---

 

技术交流

 

 

展开阅读全文

没有更多推荐了,返回首页