css各兼容应该注意的问题
1.div布局在ie浏览器和chrome浏览器,firefox浏览器不同,不如在div里面嵌套3个div,分别左中右,左边div的pading和margin在ie8以上都是几乎相同,ie8以下做内边距x2,在中间的div在chrome和fierfox中默认在左边div的右边,而ie缺不是,解决这个问题设置一下左浮动就可以解决。
2.一个ul便签,如果设置左浮动,比如li>5,便签如果设置为水平显示,li由左往右,如果设置右浮动,就是从右往左。比如一个导航栏,
首页 购买记录 关于 這是左浮动
关于 购买记录 首页 這是右浮动
3.比如一个便签<p>全面一行都会空两个空格,空格可以用&nbps;但是每个浏浏览器的空格距离不相同,ie浏览器距离比较大,所有调兼容性最好不要用&nbps;有缩进,用css控制缩进,text-indent:2em;空两个字体的空间,很灵活,无论字体多大都是两个字体的距离,只是在首行空两个字体距离。
4.一般两个模块,左右的外边距会合并,而上下的外边距会取其中的最大值。就如左边模块的margin-right=10px,右边模块的margin-left=10px,他们之间的距离就为20px;如果上模块的margin-bottom=10px,下模块的margin-top=20px,则两个模块的距离为20px,取最大那个。(内边距不能为负值,外边距可以为负值)一般都把所有便签的内外边距清空,因为每个浏览器的默认值的不同。做兼容性更家容易。一般在css文件中定义 *{padding=0px;margin=0px;}
5.块级元素比如<p></p>默认宽度为100%,所以要用选择器来改变默认值。水平居中一半不用align=“center”,新浏览器都抛弃,一半用css控制 margin=任意px,auto;就水平居中了。
6.Ie6不支持display:inline-block,一般不用。
7.父级div管不着有浮动的子div,溢出,为了解决这个问题,一般在父级div加上,overflow:hidden;
8.因为scr是行内块级元素,所以不能用margin:0px,auto(只能用于块级元素);居中,若要使他居中,转化成块级元素 diaplay:block;
9.相对定位和绝对定位
有定位属性默认层级都为0. z-index,如果都没有定义层级,后来者居上。
相对定位一般是模块当前位置。
绝对定位是相对于最近有定位父级的模块进行定位。
(z-index可以实现 许愿墙 )
(z-index=-1,那么里面的东西点不了,)
10.display:none;隐藏,位置不存在
Visibility:hidden;隐藏,位置还存在
11.css2设置透明度,w3c用opacity:0-1;
Ie用filter:alpha(opacity=0-100);
一般做兼容两个一起写
12.li {list-style-type:none;}取消li下的小圆点。一般用来做导航。·
13.有时候在ie浏览器加入背景图没效果,但是火狐和谷歌就可以正常显示,试试把png转化成jpg试试。
14.总结用css3的特性只能在ie9以上的浏览器使用,如果要求ie9以下的浏览器,请放弃css3,不然你调兼容的时间比你写代码的时间还要多,一般国外都已经放弃用ie9以下的浏览器,但是中国还用一些林婉不顾的老顽童用xp,淘宝都准备抛弃ie8以下的浏览器。给开发者建议,做一个网页需要负责任,有些官方的网页只能用ie打开,那效果不堪一看,连刚刚写前段网页的都能写出来,代码就像不是程序员写的,我看过广州市某个官方图书馆的官网,看完我感觉没爱了。其实兼容是靠经验的。多用火狐调试器看看自己的布局,花点时间,就能调出,一半ie下默认的值,你只要重置一下就ok,还有div的位置不相同,设置一下float就行,float不行就用定位,慢慢琢磨,以后开发遇到问题就能及时发觉,以上的都是我记得的兼容方法,有好多没有写出来。但我遇到问题我懂怎样解决,百度不是万能,希望自己能解决问题。一般代码不用百度,用google,最好能看懂英文,stack overflow
和github都有很多解决方法,英文不行可以下载个翻译器,真心有用的,
转载于:https://www.cnblogs.com/biyongyao/p/5400579.html
css各兼容应该注意的问题相关推荐
- css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
- css js 兼容问题
js 兼容问题 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在FF ...
- 配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
- [css] css中兼容ie浏览器的前缀是什么?
[css] css中兼容ie浏览器的前缀是什么 -webkit- 谷歌 -moz- 火狐 -o- opera -ms- ie 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定 ...
- 最全的CSS浏览器兼容问题(转至http://68design.net/Web-Guide/HTMLCSS/37154-1.html)
最全的CSS浏览器兼容问题 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2 ...
- 转载 Div+css浏览器兼容实例分析(一)
为什么80%的码农都做不了架构师?>>> 今天又在OECP社区发现了一篇好文章,<Div+css浏览器兼容实例分析>,因为文章太长所以分为两篇上传给大家分享. 用d ...
- css hack *html,HTML_CSS Hack整理,CSS Hack是在标准CSS没办法兼容 - phpStudy
CSS Hack整理 CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我进行前端开发的时候 ...
- CSS完美兼容IE6/IE7/FF的通用方法 ~!!!
http://www.w3pop.com/learn/view/p/2/o/0/doc/css_hack_ie67_ff/ CSS完美兼容IE6/IE7/FF的通用方法 作者:w3pop.com 翻译 ...
- 带你玩转CSS浏览器兼容问题——囊括了目前我所有已知的兼容性问题
CSS浏览器兼容问题 一.CSS技巧 1.div的垂直居中问题 2. margin加倍的问题 3.浮动ie产生的双倍距离 4 IE与宽度和高度的问题 5.页面的最小宽度 6.DIV浮动 7.IE捉迷藏 ...
- html4.0.1兼容ie7,CSS 完美兼容IE6/IE7/FF的通用hack方法
CSS 完美兼容IE6/IE7/FF的通用hack方法 发布时间:2009-03-20 00:27:16 作者:佚名 我要评论 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. ...
最新文章
- python爬取百度贴吧中的所有邮箱_使用 Python 编写多线程爬虫抓取百度贴吧邮箱与手机号...
- 变量作用域与预处理命令习题
- 《心欢喜,灵快乐》出版
- 学习HTML:iframe用法总结收藏
- PyTorch 深度学习模型压缩开源库(含量化、剪枝、轻量化结构、BN融合)
- 【计算几何】【极角序】【二分】bzoj1914 [Usaco2010 OPen]Triangle Counting 数三角形
- 第一章:x264视频制作meGUI工具下载
- SSH系列:(26)投诉受理
- Java并发编程技术
- 指纹识别 python实现_Python还真当是无所不能!利用Python做指纹识别播报!闻所未闻!-站长资讯中心...
- 鹰信车载桌面,通过车机可以拨号,统一管理车载电话应用
- arm linux嵌入式系统教程课后答案,ARM嵌入式系统基础教程课后习题答案及练习题__周立功...
- QQ游戏-大家来找茬 外挂
- 实战分布式之电商高并发秒杀
- RT-Thread 01线程调度与管理
- 使用oppo手机,要记得关闭这些设置,不然手机会越用越卡
- 匹配一个字符串的开头和结尾_我如何构建一个应用程序来展示精彩小说的开头和结尾
- 元学习—关系网络和匹配网络
- 立体像对空间前方交会算法
- 阿里云oss——OSSObject
热门文章
- 【POJ - 2752】Seek the Name, Seek the Fame (KMP,公共前缀后缀长度及个数)
- 伺服电机停的时候会冲一下_造成伺服电机抖动的原因竟然是它!内附解决方法...
- 计算机英语反思总结,计算机在英语教学中辅助作用的反思
- 分布式锁和mysql事物扣库存_浅谈库存扣减和锁
- 数据结构课上笔记10
- 《Python Cookbook 3rd》笔记(1.13):通过某个关键字排序一个字典列表
- 足球点球 html5,身为西甲第一点球手,C罗只有5次让点经历,难怪点球破门过百...
- 密码学专题 序列号文件
- STL源码剖析 仿函数
- 剑指offer 第一章 面试的流程