搜索
首页web前端html教程各大网站如何解决各版本IE的兼容性问题(标题有点大)_html/css_WEB-ITnose

IE6到IE10,对CSS的解释变化实在太大。但是各大网站都做到了全兼容(非IE类浏览器本身就没问题。),小弟想问一下,比较通用的解决方法是怎样的?这方面的内容,有没有一个统一的方案,或者说教程之类的。
谢谢各位大侠啊。


回复讨论(解决方案)

CSS文档上面都说明了哪些浏览器不支持该样式

把针对ie6的样式放这里

CSS文档上面都说明了哪些浏览器不支持该样式

把针对ie6的样式放这里
楼上说的这种情况我知道,这是针对小型页面的做法。而大型网站,只可能局部使用这种方法,否则淘宝光做从ie6到ie9,再到ff,再到gc,完蛋了!
当然咯,这种方法也需要,那么哪里有整理好的全资料吗?
谢谢啊。

做到兼容的前提是你的CSS代码一定要很规范,像我以前写的代码在没浏览器就不一样,然后判断什么的啊,很是麻烦,但是现在大部分都没有问题,代码写规范一下,就不会有太大问题,局部可以用_width,啊,或者if这样的就OK了

反正我觉得还是要去寻找一下CSS方面的兼容写法,应该能解决很多问题!

哇,二楼的大哥凌晨两点半还不睡的么~~~~~
那个,我觉得浏览器的兼容无非就是margin,padding,png图片啦~~~
你的网站大,那就写一屏代码就调试一下各个浏览器吧~不然等写全了再检查来改就太费事了。
写一屏检查一屏,我一般都是这样的,不会出好多问题啦~~
哪个浏览器兼容有问题,就针对那个浏览器写单独的样式吧~~~
嘿嘿
o(∩_∩)o~

做到兼容的前提是你的CSS代码一定要很规范,像我以前写的代码在没浏览器就不一样,然后判断什么的啊,很是麻烦,但是现在大部分都没有问题,代码写规范一下,就不会有太大问题,局部可以用_width,啊,或者if这样的就OK了

4楼说的很对,我估计就是这样的。那么,这种规范,有整理好的规范教程吗?比如:padding在什么情况下,不要和margin一起用。
其实说穿了,就是说,CSS那么多功能,无数种用法,但是要做到全兼容,那么必定是要被砍掉一部分功能的,那么谁有整理出来的,砍掉的这部分教程或者说内容。谢谢

首先,要重置页面样式 比如:*{margin:0;pading:0} ...

然后,根据比较标准的浏览器写样式(ff, chrome)

最后,钟对其它的浏览器作一些处理(ie, safari,opera)

出问题的主要原因不外乎:
盒模型解析不同(比如width:100%;然后又给了补白)

补白的合并(主要是margin-top, margin-bottom)

浮动(反正没有特别需求,我都是用overflow:hidden;但新手往往会因为这个反而被一些BUG搞的找不着北,老老实实的.clear; clear:after; *html .clear比较好)

各浏览器的非人道BUG(这个后期靠经验,前期靠baidu, google)

首先,要重置页面样式 比如:*{margin:0;pading:0} ...

然后,根据比较标准的浏览器写样式(ff, chrome)

最后,钟对其它的浏览器作一些处理(ie, safari,opera)

出问题的主要原因不外乎:
盒模型解析不同(比如width:100%;然后又给了补白)

补白的合并(主要是margin-top, margin-bottom)

浮……

有整理好的首先、然后、最后吗?谢谢啊,开这个贴的意思就是要整理好的,能真实使用的内容。省略号我知道啊,就是代表还有N多,我要的就是那个N多,不是省略号,谢谢啊,谁能有一份整理好的,哪怕不是最全,也可以啊。

还是要谢谢8楼啊!

其实说穿了,就是说,CSS那么多功能,无数种用法,但是要做到全兼容,那么必定是要被砍掉一部分功能的,那么谁有整理出来的,砍掉的这部分教程或者说内容。谢谢
楼主太偷懒了.偷懒只能暂时省力,可一旦有问题,你还是傻眼.
所以别人给你整理出N页来都没用.最有用的是你自己挨个要学到练到悟到.
你说要"砍掉一部分功能",这恰恰是反了(又是偷懒的想法,偷懒是你整个核心的问题).
为了兼容,你得尽可能多的学全,为了一个功能,有时要在CSS里写多好几倍的内容.
至于到底有没有约定俗成的规则和代码片段,那是不可能的.都说JS灵活,可CSS比JS还灵活百倍,完全根据你的页面设计而变化.除非你想用跟人家完全一样的界面,那就有捷径了,直接用人家的CSS和HTML结构,只改文本内容.

12楼说的对,我确实有偷懒的想法,但也有不偷懒的想法,那就是:整理出来的内容,不是说要整理好的CSS。而是说,整理好的,对于全兼容的CSS用法的汇总。
例如:现有的整理好的都只是某个属性,在不同浏览器下的解释,然后例举几乎所有的属性。这样做的好处,这是一本工具书,好比字典。光抱着英语字典,是学不会真正英语的。
我想要的,可以是一个教程,关于该如何写全兼容CSS的教程。而这个东西,靠点点滴滴汇总,确实是可行的,但我相信,想学全兼容的同学都想有这么个教程,这个教程是归纳了所有不兼容的内容,然后教我们该如何去构建一个全兼容的网站。
相信很多人在构建网站的一开始,其实就犯了某些不兼容的错误,因为没有这方面的指导或教程,导致最终网站构建完毕后,再来逐一改不兼容的地方,也都是知其然而不知其所以然(即:加个属性,减个属性之类,碰巧就兼容了)。
所以,如果有这么个教程,我相信会是有益所有人的,哪怕是本书需要买的话,我也会毫不犹豫出手的。

补充:
例:有的时候需要有部分留白,在视觉上,padding和margin的效果是一样的,但是其父元素或子元素或相邻元素的某个属性(比如display:fixed)可能就会造成浏览器的兼容性问题。于是,该如何整体规划,整体规划的理论依据又是怎样的?
大家可以看看做到全兼容的各大网站的CSS,那是有人总结出来的,同时伴随着这种总结,要这些CSS能发挥其作用,是必须要屏弃某些CSS功能的(肯定存在某些CSS功能是只要使用了,就会造成无法全兼容)。我想要的就是这个总结的过程,或者说教程,谁能帮帮我吗?如果把那个CSS下载下来,也是没用的,因为你不知道配合这个CSS,该如何规划自己的网站。

深有感受啊,4L说的是啊,我以前刚开始写页面的时候,兼容性差的很啊,后来做的多了,估计是质量提高了吧,一般都不会出现问题,如果ie6有了问题,那一定是页面哪里没有写规范,我觉得ie6虽然很烦人,但是他的检错能力真的很强啊,犯一点错误都不行,所以规范很重要啊

我觉得靠个教程就能全兼容是根本不可能的,画面结构,标签嵌套的不同,都会互相有影响,还是要根据属性判断具体的问题。

计划往往赶不上变化快,现实点,一步一个脚印才是真。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!