浏览器兼容性问题

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

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

碰到频率:100%

解决方案:CSS里 *{margin:0;padding:0;}

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

2.浏览器兼容问题五:图片默认有间距

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

碰到几率:20%

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

备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)

3. ie6.0横向margin加倍

产生因素:块属性、float、有横向margin。

解决方法:display:inline;

4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度。

解决方法:a 在子标签最后清浮动{<div style="height:0;clear:both;">&nbsp;</div>}

b 父标签添加{overflow:hidden;}

c 给父标签设置高度

5.两个块元素,竖向的margin值不增加,会重叠,其间距为最大margin值。

6. 优先级:被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中,!important不起作用。

7.火狐不识别background-position-y 或background-position-x;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自译文章/自学记录

CSS中的BFC详解

一、何为BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是...

11230
来自专栏leon的专栏

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。 比如antd-mobilenpm包的引入。在不做特殊处理的前提下...

10130
来自专栏前端讲堂

金三银四,那浏览器兼容你知多少?

它表示所附加的声明具有最高优先级的意思,被浏览器优先显示(ie6不识别此写法) 语法:选择符{属性:属性值!important;}

6720
来自专栏vue的实战

vue中使用iconfont

21120
来自专栏自译文章/自学记录

CSS基础布局

14620
来自专栏vue的实战

2019-08-02hover.css 插件的使用

8230
来自专栏vue的实战

element-ui日期选择组件

64040
来自专栏小蔚记录

vue -- 7 个 有用的 Vue 开发技巧

随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用...

7620
来自专栏前端技术分享|前沿资讯|读书分享

CSS——loading动画

  由图可见,动画1中有三根竖线,在进行变长变短的高度变化以及线条的颜色变化,因此分为以下几个步骤:

16640
来自专栏自译文章/自学记录

CSS基础

css:Cascading Style Sheet 层叠样式表,简而言之 就是css的样式 是可以叠加的。默认 是根据css选择器的权重,按权重进行叠加,权重值...

7920

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励