0

0

各大网站如何解决各版本IE的兼容性问题(标题有点大)_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:16:10

|

1358人浏览过

|

来源于php中文网

原创

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虽然很烦人,但是他的检错能力真的很强啊,犯一点错误都不行,所以规范很重要啊

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

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

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

5

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

0

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

7

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

2

2026.01.21

windows激活码分享 windows一键激活教程指南
windows激活码分享 windows一键激活教程指南

Windows 10/11一键激活可以通过PowerShell脚本或KMS工具实现永久或长期激活。最推荐的简便方法是打开PowerShell(管理员),运行 irm https://get.activated.win | iex 脚本,按提示选择数字激活(选项1)。其他方法包括使用HEU KMS Activator工具进行智能激活。

2

2026.01.21

excel表格操作技巧大全 表格制作excel教程
excel表格操作技巧大全 表格制作excel教程

Excel表格操作的核心技巧在于 熟练使用快捷键、数据处理函数及视图工具,如Ctrl+C/V(复制粘贴)、Alt+=(自动求和)、条件格式、数据验证及数据透视表。掌握这些可大幅提升数据分析与办公效率,实现快速录入、查找、筛选和汇总。

6

2026.01.21

毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm
毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm

毒蘑菇VOLUMESHADER_BM测试网站网址为https://toolwa.com/vsbm/,该平台基于WebGL技术通过渲染高复杂度三维分形图形评估设备图形处理能力,用户可通过拖动彩色物体观察画面流畅度判断GPU与CPU协同性能;测试兼容多种设备,但中低端手机易卡顿或崩溃,高端机型可能因发热降频影响表现,桌面端需启用独立显卡并使用支持WebGL的主流浏览器以确保准确结果

9

2026.01.21

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

7

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号