如何解决网页在不同模式下显示错乱等问题

详细操作

遇到网页显示不正常，最常见的方法就是让客户手动切换浏览模式：

由于部分网页（例如论坛、网银等）在极速模式下出现兼容性问题，显示不正常，这时只能让客户手动换到兼容模式来浏览网站，如下图所示。

但是由于极速模式对于新网站的一些特效渲染的很好，而“兼容模式”对于css3修饰的效果并不感冒。那么如果一个采用css3的网站遇到客户使用“兼容模式”又不愿意换怎么办？

360浏览器给出的方法是：可以新增加了一个控制手段：内核控制Meta标签。只要你在自己的网站里增加一个Meta标签，告诉360浏览器这个网址应该用哪个内核渲染，哪么360浏览器就会在读取到这个标签后，立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。比如，若页面需默认用极速核，增加标签： 。 但这样也存在一个问题：如果处理国内其他浏览器，以及那些未知名的浏览器甚至将来可能出现的浏览器？这样的解决方发存在风险。

还有一种方法，就是【平稳退化】。即保证在不能兼容的浏览器底下做最小的牺牲，比如一个渐变的css3效果，在ie8或者国内浏览器的兼容模式下，我们要保证页面样式，效果基本不会出现bug，仅限制在css3的过度效果这一块不能实现，不支持的则直接切换，不给于过度处理，则能在不支持的浏览器下平稳退化而不至于是页面不能正常运行。

用户类似问题：

问题1：自己的网站用360急速模式打开网页排版错乱，如何解...

360急速版用的是WebKit内核，和google的chrome浏览器是同一个内核 这代浏览器都是标准浏览器 之所以你的网站排版错位，就是因为网站页面的HTML+CSS 编写的不规范导致的 建议你去深入学习下HTML+CSS >>详细

问题2：浏览器急速模式与兼容模式（导致了网站前端错位）...

楼主这个问题，我要说下，是不是你把CSS有些规则写错了，比如padding-top;margin-bottom 等之类的弄反了，我就出现这样的问题，你试试？请教下，css 高手 >>详细

问题3：网站在360浏览器兼容模式下错乱,极速模式下正常，...

这是IE8的原因，ie对于网站html渲染不标准都是家常便饭，相对于ie6ie8还算好点了 >>详细

问题4：怎么写代码让网页都以兼容模式打开，就是各个浏览...

这个是您写的代码与浏览器不兼容，可以试一试这段代码，在代码head的meta标签中加入meta http-equiv="X-UA-Compatible" content="IE=7" /> 不过不建议这样使用，为了用户体验，还是得从代码方面改进才好。毕竟现在的浏览器很多，不是一个代码就... >>详细

问题5：html网页代码错位,不兼容其他浏览器的极速模式

帮不了，看不懂。 1：style属性直接写在body体里面，不利于网页的搜索优化。 2：注释太少，不管是别人还是你自己过一段时间，都很难看懂。 最后浅见：兼容出现问题一般是margin和padding设置的问题。你修改一下这两个属性，有些时候使用绝对定位... >>详细