---恢复内容开始---
达到效果如图：
思路：
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宽度莫名奇妙撑出总宽度问题*/ * 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>
兼容主流浏览器
---恢复内容结束---