html搜索框实现及IE浏览器的兼容性【移动开发】,专业承接网页前端工作室,专业承接网页切图排版|html页面制作|jpg或psd转html,psd切图html
时间： 来源：
html搜索框实现及IE浏览器的兼容性
【移动开发】
点击次数：1394
其它web前端开发资讯
web前端行业资讯Web new NewsList
我们保证We guarantee
> psd效果文件手工切图，保证图片效果最好体积最小利于传输
> 100%手写的HTML(DIV+CSS)编码，绝对符合W3C标准
> 代码精简、css沉余量小、搜索引擎扫描迅速，网页打开快捷
> 应用Css Sprite能够减少HTTP请求数，提高网页性能
> 跨浏览器兼容（IE6、7、8、9，Firefox火狐，Chrome谷歌）
一些合作过的客户其他回答(6)
开头加一句&!doctype html&试试
我的火狐打开你的网站。也是有问题
F12用工具看CSS，搜索按钮的top设置成0问题解决
收获园豆：5
input#searchbutton /*搜索按钮*/ 中 top：2 去掉
我把你的代码增加了一个属性vertical-align:bottom,,还有就是把两个input框放在同一行中书写，我在这边chrome、FF、IE都可以对齐了
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
input.maininput
width: 30%;
height: 30px;
border:2px solid #3E9CBF;
font-size: 20px;
vertical-align:bottom;
/*！！兼容两个input框对其*/
input#searchbutton
position:relative;
left:-6px;
width:10%;
height:36px;
border-style:solid;
border-color:#3E9CBF;
border-width:2px;
cursor:pointer;
/*style the text*/
font-size:<span style="background-color: #f5f5f5; color: #em;
color:#FFFFFF;
letter-spacing:.1em;
background-color: #3E9CBF;
vertical-align:bottom;
/*！！兼容两个input框对其*/
input#searchbutton:hover, input#searchbutton:focus
color:#dfe7ea;
&form onsubmit="" class="mainform"&
&input type="text" name="hanzi" id="myhanzi" class="maininput"&&input type="button"
value="搜索" id="searchbutton"&&!--换行写，chrome下input框之间会有空隙--&
&div id="pic"&&/div&
&!DOCTYPE html&&html&&head& &meta charset="utf-8" /& &title&&/title& &style type="text/css"& html body {border: 0margin: 0padding: 0} .search_div {width: 229height: 27float:} .search_input {width: 193height: 27float:} .search_btn {width: 36height:27float:} .search_input_text {width: 193 /*解决IE6宽度莫名奇妙撑出总宽度问题*/* width: 191 /*解决IE 6 7 向下偏移1像素问题处理*/*margin-top: -1height: 27line-height: 27background-image: url(img/list_search.jpg);background-repeat: no-color: #000;border: 0} .search_input_btn {width: 36height: 27background-image: url(img/list_search_btn.jpg);background-repeat: no-border: 0} &/style&&/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&
&&&您需要以后才能回答，未注册用户请先。怎样可以很好地保证网页的浏览器兼容性？
最近发现越来越多的网站在ie和火狐以及chrome下面的显示各有差异，比如知乎在不同浏览器下的显示及功能就不一样，怎样可以很好地保证网页的浏览器兼容性？
按投票排序
其实我特别不愿意看到这样的问题。保证浏览器的兼容性是一个落后的话题，先看一组豆瓣数据，各浏览器的占有率：ie6 - 30.23%ie7 - 4.8%ie8 - 30.6%ie9
1%chrome - 13.99%firefox - 7.17%safari ~ 5%其他 ~ 8%我们认为chrome + firefox + safari + ie9是高端浏览器，ie8勉强算准高端吧。这样这部分占有率约57%(如果加上其他webkit内核的浏览器会更高一些) 已经大于ie6 + ie7。高端和低端浏览器的差距可以用html5test量化一下：Google Chromium 11.0.690的分数是293，而Microsoft Internet Explorer 6.0的分数17也许有各种fallback方案可以保证完全兼容性各个浏览器，但依然不能保证低端浏览器的使用体验，顶多是看起来各个浏览器都一样了。因此，现在的设计和开发的策略是浏览器分级支持。优先为高端浏览器设计，同时考虑低端浏览器的退化方案。甚至有些复杂的应用可以拒绝ie6，提示用户使用高端浏览器。豆瓣7月份将会发布一款对ie6说no的产品（国内第一个拒绝支持ie6的产品吧）因此不要再考虑向后兼容，应该考虑向后退化，更多考虑向前兼容。
跨浏览器开发应该使用的一些经验1)一些关于跨浏览器/设备的工具1. modernizr.js 特性检测器，有就使用原生，没有就加载polyfill2. polyfill/shim 向后兼容的浏览器的js补丁，一般和modernizr一起用3. jshint.js js语法检测器4. Boilerplate 开发的最佳实践的初始模板5. 阅读第三方库关于最低版本支持6. 使用js单元测试，测试目标浏览器7. Responsive Design （针对屏幕大小）8. normalize.css 统一浏览器基本元素的风格2) 一个策略：另外，我一直说的一个策略：把浏览器分两类，一类是历史遗留浏览器，一类是现代浏览器，然后根据这个分类开发两个版本的网站，然后自己定义那些浏览器是历史遗留版本，凡是历史遗留版本浏览器，统统使用历史遗留版界面，然后通过通告栏（信息通知系统）明确告知本版本有些功能不能使用，尽快转移到现代浏览器上。然后现代浏览器的网站版本，功能全开，提供最好的用户体验。3)最后手段：最后方案，就是直接使用jReject.js这类插件，弹出有全黑蒙板的对话框，告诉用户这个网站什么版本的IE/浏览器不能用，请使用至少什么版本的IE，firefox和chrome.(这个是最后手段，以上方案都失效的情况下使用。)4)一个提醒：跨浏览器兼容问题，过去有，现在有，以后会更麻烦，所以这个问题在你的项目开始前，就必须确定下来最低支持的版本是什么，然后设计一个对应兼容方案。不要等开发完毕了，才告知要必须兼容个ie6啥的，那你的项目就有得好改了。5)面向未来：2015年es6就要正式完成了，等es6出来后，如何把es6的javascript向后兼容呢？这里我有个概念，还没实验过：1.使用es6编译器把代码导出成es5代码2.使用modernzr检查浏览器是否支持es6，支持用es6代码；不支持，用编译好的es5代码并且加载es6shim。3.使用grunt把es6编译过程完全自动化以上这个方案，应该可以使用es6代码去兼容所有的浏览器了。
你说的差异是由于不同企业的观念导致。现在越来越流行“优雅退化”，特别是IT行业的网站。优雅退化差别与传统观念在于不保证所有浏览器的表现均一致，在更符合w3c标准的浏览器中表现良好，在旧浏览器中表现没那么好但不影响正常操作（例如知乎按钮的圆角效果）。保证浏览器的兼容性更多需要靠经验，经验让你对CSS的根源有更深的认识，所以你实现兼容性不是靠hack，而是靠各种属性原本的实现再进行互补。对CSS从“how”到"why"，估计就OK了。总之这事做多了就可以了。（js那边通常用框架开发，框架本身已经隐藏了浏览器兼容）
psd转html时，需按照W3C标准流程和规范制作，用基于标准的浏览器测试，推荐firefox,chrome这样基本上，firefox,chrome,safari,opera,IE9都能表现一致然后再针对IE8、7、6进行修改
强悍的框架，还有耐心的调试 少用hack
这个问题对于Web开发者来说真是头疼的问题，我从事Web开发也有两年时间，期间遇到过许许多多类似的问题，每次都被搞得很累，后来画了大半年时间专门研究Web前端技巧，最后我总结了一些方案出来：1.在开发Web APP的时候，开发机上面最好把主流浏览器都装上，比如说：Chrome、FF、safari、IE、IE Tester... 在大多数情况下，FF和Chrome差别不是很大。2.开发过程中要注意，每做好一个样式，都要跑一遍所有要兼容的浏览器，这样虽然开发过程时间会比较长，可是会比你开发完成后再来改效率高得多，我曾经就碰到过一个产品，开发完成后由于兼容性问题导致其发展面很窄，最后不得不重新开发。3.如果真的碰到样式不兼容的情况，那么只能针对不同的浏览器做相应的调整。4.一些新的特效可能在一些版本落后的浏览器里不兼容，这个时候我们的原则就是：不求效果绚丽，只求工整规范 o(∩_∩)o 5.多积累，多看看符合W3C标准规范的CSS手册和JS手册，注意积累，或者用一些开源框架，那样兼容性可以省下不少时间以上都是个人见解，可能有的地方说得不对，还请知乎的牛人们指正!
上面的大家都说了，要渐进增强，所以要人为的制造差异，这样才能促进用户升级浏览器然后做的时候，先要CSS REST，然后在你遇到问题最多的浏览器上做首次开发（这样在首次开发时就能解决掉最多的问题，比如IE……），然后再针对不用的浏览器写HACK了（这时就要把渐进增强引入了……）
不得不考虑网站本身的用户群。像百姓网这类的分类信息网站，IE6在50%以上，反而firefox在1%都不到，设计时如果不考虑IE6，问题会非常的大。我想，保证产品的可用是底线，浏览器的兼容性方面可以通过避开一些不统一的写法等尽量保证效果统一，一些浏览器的特性，在现阶段只能说是锦上添花的东西。
构思整体和局部的实现时候就要考虑很多东西了，比如兼容性，制作成本，维护成本等等，而这恰恰是大量实际经验中不断学习而来的能力。吃过的苦头，争取下次不要再吃，没碰到过问题，没棘手过是不会有提高的。多多实践吧。
尽量使用标准的网页布局方式，也就是符合W3C的布局，再加上css的使用也符合W3C的使用，这样完成一个页面下来，其实很少有地方需要你针对特定的浏览器进行兼容性修正。做过比较多的页面，又复杂也有简单的，大多时候，一个页面下来，其实只有两三个地方需要进行大的兼容性调整。
全Flash，确保浏览器兼容。请权且把这个当作玩笑～真实的情况是，你可以通过一些成熟的手段去兼容90%的浏览器体验，尽管显示上略有差别，但至少不会走样。剩下的那10%就放弃吧，或者等待他们学会使用更好的浏览器。
在保证产品可用性的情况下,作些渐进增强,不必去追求表现层的一致性
我们都是采用预先监测浏览器的种类及版本，然后选择加载不同样式的不同的CSS文件，这样就能保证该网页在不同浏览器下的显示问题。
规范的，良好书写习惯的代码写出的东西基本不需要太多兼容性的问题，一些兼容性的问题基本上都是可以避免的