html 布局兼容性,HTML+CSS入门 浏览器兼容性问题及解决方案
本篇教程介绍了HTML+CSS入门 浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
问题一:不同浏览器的标签默认的外补丁和内补丁不同
问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:css里加:
1 *{margin:0;padding:0;}
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的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,需要进行的设置为:
1 {min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。
问题七:透明度的兼容css设置
方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
html 布局兼容性,HTML+CSS入门 浏览器兼容性问题及解决方案相关推荐
- 在网上找到一个CSS hack列表,记录在这里以分析css的浏览器兼容性
另外摘抄一份目前的css浏览器兼容问题汇总,记录在这里自己好好学习一下 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的 ...
- css 如何ie7 兼容性问题,CSS对浏览器的兼容性性处理(IE7,6与Fireofx)
CSS对浏览器的兼容性性处理(IE7,6与Fireofx) 发布时间:2013-08-21 18:57:46 作者:佚名 我要评论 IE7,6与Fireofx的兼容性的处理实在是让前端WEB开 ...
- 移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性 在移动端时可以放心的使用h5相关的标签 但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
- css3低版本浏览器兼容性问题
css3低版本浏览器兼容性问题 什么是浏览器兼容性问题? 浏览器内核不同,对同一段代码会有不同的解析,就会造成页面效果不统一的情况,进而造成浏览器兼容性问题. 各个浏览器内核: 浏览器类型 内 ...
- Git版本控制浏览器兼容性测试
Git版本控制工具 一.Git的基本概念 Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理Gitee 码云是有开源中国出品的代码托管平台,支持Git和SVN,提高 ...
- 常见的浏览器兼容性问题与解决方案——CSS篇
1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...
- css 定位兼容性,CSS基础:定位与浏览器兼容性
position属性 介绍: CSS position属性用于指定一个元素在文档中的定位方式.top,right,bottom 和 left 属性则决定了该元素的最终位置. position 属性值 ...
- 【转】常见浏览器兼容性问题与解决方案css篇
小满语:说到兼容性问题,不得不说一下IE浏览器,尤其是IE9以前,兼容性差的要哭,来,擦擦眼泪,学习一下兼容性问题的解决方案~本篇主要是布局后加样式后导致浏览器显示不统一的情形: 所谓的浏览器兼容性问 ...
- CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题 比如 border: 0xp solid #fff;两个浏 ...
最新文章
- 压测接口线程数设置_ZAT掌门性能压测巡检系统实战和落地
- python在线读-python初级实战-----主机在线情况监控web
- Java 多线程启动为什么调用 start() 方法而不是 run() 方法?
- 向模态窗体传递参数和获取返回值
- sql时间格式转换yyyymm_XML和实体类之间的转换
- 压缩感知高斯测量矩阵matlab,浅谈压缩感知(十七):测量矩阵之有限等距常数RIC的计算...
- C# .net core 使用自定义的WebProxy
- [RabbitMQ]整合SpringBoot
- Spring Cloud随记----分布式配置中心再探---消息总线的引入
- C语言:基于Easyx库实现连连看小游戏
- 【Java】Jsoup爬虫快速入门案例
- python处理时间序列非平稳_用python做时间序列预测4:平稳/非平稳时间序列
- 攀升笔记本电脑P1X Deepin20.3安装 RTL8821CE RTL8152无线网卡驱动
- python面试题(面试重点)
- 有一个已排好序的数组,要求输入一个数后,按原来排序的规律将它插入数组中——C语言
- FastBond智能可穿戴之智能手表原型设计(MAX32660+SHT40+ADXL345+OLED+RTC)
- iPhone破解相关知识
- 我们能从后验分布中学到什么?贝叶斯后验的频率解释
- Kali Linux 简介
- 一学就会 | 3步搞定弥散海报