问题一:不同浏览器的标签默认的外补丁和内补丁不同

问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

解决方案:css里加:

;;}

备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。

问题二:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大

问题症状:常见症状是ie6中后面的一块被顶到下一行。

解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性。

备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

问题三:设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度

问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第二种)

问题症状:ie6里的间距比超过设置的间距

解决方案:在display:block;后面加入display:inline;display:table;

备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

问题五:图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加上问题一中提到的通配符也不起作用。

解决方案:使用float属性为img布局

备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

问题六:标签最低高度设置min-height不兼容

问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容

解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

问题七:透明度的兼容css设置

方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

笔试常考--浏览器兼容性问题及解决方案(CSS)的更多相关文章

  1. 常见浏览器兼容性问题与解决方案css篇

    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    ...

  2. 常见的浏览器兼容性问题与解决方案——CSS篇

    1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...

  3. 笔试常考--浏览器输入一个URL点击回车之后发生了什么

    解析URL:浏览器首先对拿到的URL进行识别,抽取出域名字段. DNS解析: 查询浏览器缓存(浏览器会缓存之前拿到的DNS 2-30分钟时间),如果没有找到, 检查系统缓存,检查hosts文件,这个文 ...

  4. JAVASCRIPT 浏览器兼容性问题及解决方案列表

    JAVASCRIPT 浏览器兼容性问题及解决方案列表(1)获取HTML元素只兼容IE:document.all.hello hello 兼容所有: document.getElementById(“h ...

  5. ie浏览器兼容性的入门解决方案

    IE浏览器的兼容性素来是令人头疼的问题,大名鼎鼎的FUCK-IE不是浪得虚名的. 这里使用的解决方案是HACK,具体原理就是针对不同的浏览器写不同的HTML.CSS样式,从而使各种浏览器达到一致的渲染 ...

  6. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  7. 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  8. PC/H5端各浏览器兼容性问题及解决方案?

    概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况 ...

  9. http面试笔试常考知识点(二)

    接上一篇随笔 1. https协议为什么比http安全? 内容加密:建立一个信息安全通道,确保信息传输安全: 身份认证:确保网站的真实性: 数据完整性校验:防止内容被第三方冒充或者篡改 2.常见状态码 ...

随机推荐

  1. MPEG2_TS流基本概念和数据结构

    时对应network_PID,program_number等于其它值时对应program_map_PID. (3)PMT   PMT数据结构如下: TS_program_map_section(){ ...

  2. 快速开发 HTML5 交互式地铁线路图

    前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是 ...

  3. Unity3d 截屏保存到相册,并且刷新相册

    要做一个截图的功能,并且玩家可以在相册中看到. 做的时候遇到了三个问题: 1.unity自带的截图API,Application.CaptureScreenshot在Android上不生效 2.图片保 ...

  4. JAVA简便解析json文件

    JAVA简便解析json文件 首先放上我要解析的json文件: { "resultcode":"200", "reason":"S ...

  5. [BZOJ1045] [HAOI2008] 糖果传递 (贪心)

    Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正整数n<=,表示小朋友的个数.接下来n行,每行 ...

  6. .NET中的线程与异步(笔记)

    翻出了之前记录的笔记,基本涵盖了.NET中线程和异步的相关概念.可以提供一个学习的方向. 线程类型 工作者线程IO线程 线程池 全局队列(QueueUserWorkItem.Timer总是放入全局)本 ...

  7. sharepoint 2013实践

    之前在一篇文章中说过了SharePoint环境的安装.那么如何使用SharePoint开发一个站点呢?这就是本篇所要阐述的问题. 在如何具体操作之前,我们先来普及下SharePoint基础知识.Far ...

  8. MySQL多数据源笔记1-MySQL主从复制

    1.为什么要做主从复制? 1.在业务复杂的系统中,有这么一个情景,有一句sql语句需要锁表,导致暂时不能使用读的服务,那么就很影响运行中的业务,使用主从复制,让主库负责写,从库负责读,这样,即使主库出 ...

  9. 关于del命令

    del命令用于删除具体的文件,但是删除文件的时候如果不指定文件的扩展名就会显示找不到文件 还有如果所要删除文件的文件名中含有空格的话该命令会自动识别为几个文件,就从空格处把文件 分成几份,然后就会显示 ...

  10. js中判定this的规则

    判定this new绑定:新建对象; var bar = new foo(); 明确绑定(call.apply,bind):指定对象; var bar = foo.call(obj) 隐含绑定:环境对 ...