关于网站搜索框与按钮浏览器兼容性问题

---恢复内容开始---

达到效果如图：

思路：

1.用3个div去实现大小的固定。

css:

.search_div {width: 229px;height: 27px;float: left;}
.search_input {width: 193px;height: 27px;float: left;}
.search_btn {width: 36px;height: 27px;float: left;}

html:

  <div class="search_div">
        <div class="search_input"></div>
        <div class="search_btn"></div>
    </div>

2.填充input标签

<div class="search_div">
        <div class="search_input">
            <input class="search_input_text" type="text" id="search_input_text" />
        </div>
        <div class="search_btn">
            <input class="search_input_btn" type="button" id="search_input_btn" />
        </div>
    </div>

3.input标签样式

 .search_input_text {width: 193px; height: 27px;line-height: 27px;background-image: url(img/list_search.jpg);background-repeat: no-repeat;color: #000;border: 0px;}
 .search_input_btn {width: 36px;height: 27px;background-image: url(img/list_search_btn.jpg);background-repeat: no-repeat;border: 0px;}

问题：

1.IE6宽度莫名奇妙撑出总宽度问题
2.IE 6 7 向下偏移1像素问题处理
解决：
 /*解决IE6宽度莫名奇妙撑出总宽度问题*/ * width: 191px; /*解决IE 6 7 向下偏移1像素问题处理*/ *margin-top: -1px; 

最终：
css:

 <style type="text/css">
        html body {border: 0px;margin: 0px;padding: 0px;}
        .search_div {width: 229px;height: 27px;float: left;}
        .search_input {width: 193px;height: 27px;float: left;}
        .search_btn {width: 36px;height:27px;float: left;}
        .search_input_text {width: 193px; /*解决IE6宽度莫名奇妙撑出总宽度问题*/* width: 191px; /*解决IE 6 7 向下偏移1像素问题处理*/*margin-top: -1px;height: 27px;line-height: 27px;background-image: url(img/list_search.jpg);background-repeat: no-repeat;color: #000;border: 0px;}
        .search_input_btn {width: 36px;height: 27px;background-image: url(img/list_search_btn.jpg);background-repeat: no-repeat;border: 0px;}
    </style>

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>兼容所有浏览器的搜素样式</title>
</head>
<body>
    <div class="search_div">
        <div class="search_input">
            <input class="search_input_text" type="text" id="search_input_text" />
        </div>
        <div class="search_btn">
            <input class="search_input_btn" type="button" id="search_input_btn" />
        </div>
    </div>
</body>
</html>

兼容主流浏览器

---恢复内容结束---

posted on 2015-10-27 14:35 指尖上的青春阅读(437) 评论(0) 编辑收藏举报