ie6、ie7—input{border:none}无效问题及ie8及以下的input文本框文字偏上问题

问题一:

产生环境:ie6、ie7

产生条件:当想给input元素去掉边框时给input元素添加声明border:none;如下:

<div class="search_box">
        <input type="text" class="search_input">
        <input type="button" class="search_btn" value="搜索">
</div>

*{margin: 0px;padding:0px;}
input{border: none;}
.search_box{width:300px;height:200px;background: red;float: left;}
.search_input{width:200px;height: 20px;float: left;}
.search_btn{width: 50px;height:20px;float:left;}

ie6、ie7浏览器除外的浏览器显示结果:


ie6、ie7的显示结果:


所以可以发现在ie6、ie7中对input标签声明border:none无用。


解决办法:给input标签添加背景颜色,如下:

*{margin: 0px;padding:0px;}
input{border: none;background: none;}
.search_box{width:300px;height:200px;background: red;float: left;}
.search_input{width:200px;height: 20px;float: left; background: white;}
.search_btn{width: 50px;height:20px;float:left; background: yellow;}
之后ie6、ie7结果如下:


结论:我们可以事先在CSSReset中给input标签如下声明以兼容ie6、ie7 {border:none}无效的问题:

input{outline:none;border: none;background: none;}

问题二:
产生环境:ie8及以下

产生条件:如果input输入框的高度高于字体高度:

<div class="search_box">
        <input type="text" class="search_input">
        <input type="button" class="search_btn" value="搜索">
</div>
*{margin: 0px;padding:0px;}
 input{border: none;background: none;}
.search_box{width:250px;height:200px;background: red;float: left;}
.search_input{width:200px;height:30px;float: left; background: white;}
.search_btn{width: 50px;height:30px;float:left; background: yellow;}
ie8及以下之外的浏览器结果如下:





ie8及以下结果如下:

解决办法:给input加行高其值等于input高度

input{line-height:30px/9;}/*/9意思时针对所有版本的ie浏览器属于csshack*/

展开阅读全文

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