其实一般浏览器就IE6、IE7、IE8、火狐、GOOGLE浏览器chrome等,大家最困扰的就是网页在各大浏览器的兼容问题,其实所有浏览器在不兼容方面只存在两点:浮动和外填充,只要把这两点熟悉精通了,那么网页在所有浏览器里显示也就都正常了。

  当然这两点都是针对层的布局,所以大家用表格布局时不会遇到浏览器不兼容的问题。

  1,浮动。浮动其实就是各个层摆放重叠的问题,有的层在上面有的层在下面,要想做到层的结构不重叠,一般人会想到消除浮动clear:both,但在实际中这个使用不是很理想也不太好用,最简单的解决办法就是分为三个层,其中头部和页尾用基础层固定,中间是浮动内容层,在浮动层里的所有容器只能嵌套不能叠加。

  这样的布局,永远都不会出现重叠浮动的现象了,另外就是连续的字母或数字也可以自动换行,而不用象网上说的加这代码那代码,养成好的CSS设计习惯,很多头疼问题自然就不存在了。

  方法提示:浮动层的CSS样式控制最好用float:left;margin:0px;padding:0px;width:***px;height:***px;overflow:hidden;实际案例应用可参考站点:http://www.c71.cn的CSS编写技巧。

  2,外填充。其实外填充也就是如果使用margin时在各个浏览器解析不太一样,比如IE6正常的,但在IE7/IE8和火狐之间会多出几个显示像素。这时候最好的解决办法就是放弃margin改用padding一样可以达到想要的效果。

  把握好这两点后,你只需要拿一个浏览器比如IE8就可以测试了,只要在IE8显示正常了,那么在其他所有的浏览器中显示也一定是正常的。

转载于:https://www.cnblogs.com/zhouwenwu/archive/2012/03/23/2413212.html

兼容所有浏览器的网页制作方法相关推荐

  1. html语言的网页制作方法与技巧探讨,HTML语言的网页制作方法与技巧探讨

    HTML语言的网页制作方法与技巧探讨 匡成宝 [期刊名称]<电脑迷> [年(卷),期]2017(000)003 [摘要]现代社会网络应用已经是极为常见的,甚至是不可缺少的,无论是工作还是生 ...

  2. html网页编辑详解,网页制作方法讲解

    网页制作方法讲解 在你浏览互联网时,有没有一种冲动想要自己做一个精美的互联网页面?大家知道网页制作方法吗?下面我们就给大家详细介绍一下吧! 1.网页制作三剑客 网页制作通常会使用到奥多比的网页制作三剑 ...

  3. apiCloud app调用浏览器打开网页的方法

    在APP调用浏览器有两种方法: 1.使用openApp 2.使用openWin 两种方法调用浏览器后的效果有一点不同: 1.使用openApp调用浏览器后,如果手机内有多个浏览器,会首先弹出选择浏览器 ...

  4. app调用浏览器打开网页的方法 apicloud

    在APP调用浏览器有两种方法: 1.使用openApp 2.使用openWin 两种方法调用浏览器后的效果有一点不同: 1.使用openApp调用浏览器后,如果手机内有多个浏览器,会首先弹出选择浏览器 ...

  5. 兼容所有浏览器的网页播放器

    前段时间在搞一个在线教学的网站,涉及到播放器,在此分享一个好的兼容所有主流浏览器的视频播放插件 一.采用video.js的插件 首先下载video.js最新v5.18.4版 2017-3-24更新(支 ...

  6. 制作一个amp页面-谷歌移动加速器AMP网页制作方法

    这篇博客将给大家带来一系列技术性的东西,大家看好了哦,本篇给大家说点什么呢-amp,这个东西是谷歌搞出的针对移动优化的,和百度mip是一样的东西,关于哪家的好呢,这个还真不好评说,海豚的建议是amp和 ...

  7. 兼容主流浏览器的网页闹钟

    //下面是要用到的全局变量 var songSrc=""; //铃声路径 var clickTime=null; //按键时的即时时间 //判断是否为数字 function nan ...

  8. html语言制作网页,HTML语言的网页制作技巧与方法

    HTML是"Hyper Text Markup Language"的缩写, 意为超文本标记语言, 其不仅仅属于网页制作中使用的标记语言, 同时也能够较好服务于超文本文档的创建.对于 ...

  9. html语言的网页制作,HTML语言的网页制作技巧与方法

    HTML语言的网页制作技巧与方法发布者:本站     时间:2019-07-26 10:07:07 HTML是"Hyper Text Markup Language"的缩写, 意为 ...

最新文章

  1. Java开发最常犯的10个错误,打死都不要犯!
  2. 重磅!单目深度估计方法:算法梳理与代码实现
  3. 顶级生物信息学 RSS 订阅源
  4. Workout Wednesday Redux (2017 Week 3)
  5. golang编码转换
  6. python3 线程隔离_Python的线程隔离实现方法
  7. 后台系统可扩展性学习笔记
  8. 一条数据的HBase之旅,简明HBase入门教程2:数据模型
  9. Android的双进程守护,广播和双进程
  10. 智能送药小车(F 题)--2021 年全国大学生电子设计竞赛
  11. oracle财务软件凭证打印,ORACLE财务软件简明操作文档.doc
  12. Access-Control-Allow- 跨域CORS 的使用
  13. MySQL数据分析-(14)表补充:字符集
  14. 信息收集之——FOFA网站常用搜索语法
  15. 关于Python的 求解答Bunch Pattern
  16. 8种绝对成交的销售话术技巧
  17. 畅言普通话软件测试准确率高吗,畅言普通话测试准确吗_畅言网普通话很严格...
  18. python基础“猜单词游戏”代码
  19. 四大亮点不容错过,TDengine 开发者大会全议程公布!
  20. 2021年11月_IEEE Transactions on Geoscience and Remote Sensing_科技前言热点调查表

热门文章

  1. linux php和java环境变量配置_Linux下配置Java环境变量
  2. linux 中w和x 区别,r、w、x权限在文件和目录中的含义有何区别?
  3. docker配置 nacos_Nacos - 阿里开源配置中心
  4. arm ida 伪代码 安卓 符号表_IDA 制作 sig文件 gdb 导入符号表
  5. java软件开发ea介绍_开发说明 — Eacloud 1.0 documentation
  6. 语言nomogram校准曲线图_预测模型的概率校准
  7. css不继承父类样式_提升你的Python编程能力,细说类的继承,拿走不谢
  8. html仿京东快速购物导航,jQuery仿京东楼层滑动侧边栏高亮(原创)
  9. linuxpython升级3.5_linux升级python3.5到3.6
  10. 博达3956交换机配置手册_网络设备维保浅谈之交换机维保