文档章节

关于CSS兼容性问题

yxxz
 yxxz
发布于 2016/06/03 19:55
字数 967
阅读 3
收藏 0

浏览器兼容问题可分为三类:

1.与渲染相关:和样式相关的问题,即体现在布局效果上的问题。

2.与脚本相关:包括Javascript和DOM、BOM方面的问题。

3.其他:比如浏览器自身提供的功能,在内核层之上的。

 

下面总结一些常见问题及解决办法get

Javascript

   1.    HTML对象获取的问题

FireFox:document.getElementById(‘idName’);

IE:document.idname 或者  document.getElementById("idName");

解决:统一使用 document.getElementById(‘idName’);

2.    const问题

Firefox下,可以使用const关键字或var关键字来定义常量;

IE下,只能使用var来定义常量,

解决:统一使用var来定义常量

3.  event.x与event.y问题

IE下,event对象有x,y属性,但是没有PageX,PageY属性;

Firefox下:event对象有PageX,PageY属性,但是没有x,y属性;

解决:使用mX (mX = event.X?event.X:event.PageX)来代替IE下的event .X 或者 Firefox下的event.PageX

4,  window.location.href 问题

IE或者Firefox2,0下,可以使用 window.location 或 window.location,href 

Firefox1,5下 只能使用 window.location

解决:使用window.location 来代替 window . location . href

5.   frame 问题 

例如:<frame src = "xxx.html"  id = "frameId"  name =  "frameName"  />

1,访问frame 对象:

IE:使用window .frameId 或者 window.frameName 来访问这个frame 对象,frameId和frameName可以同名。

Firefox:只能使用window.frameName来访问这个frame对象

另外,在IE和Firefox 中都可以使用window . document . getElementById( "frameId" )来访问这个对象

6.自定义属性问题

在Iej下  , 可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性; Firefox下,只能使用 getAttribute()获取自定义属性

解决:统一使用getAttribute()来获取自定义属性

 

get小技巧:

》div的垂直居中问题  vertical-align:middle  将行距增加到和整个DIV一样高 line-height:200px;然后插入文字,就垂直居中了,缺点是 要控制内容不要换行

》margin 加倍的问题  设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug解决办法是在这个div 里面加上display:inline  例如  <#div id = ’imfloat‘>  相应的css 为#lamFloat{ float:left  margin :5px  } 此时IE下理解为10px  加上display:inline 就可以避免

》浮动ie产生的双倍距离     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;  

》页面的最小宽度     min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类, 然后CSS这样设计:    #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}    第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度

》DIV浮动IE文本产生3px 的bug  左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距。 #box{ float:left; width:800px;}   #left{ float:left; width:50%;}   #right{ width:50%;}   *html #left{ margin-right:-3px; //这句是关键}    <div id="box">   <div id="left"></div>   <div id="right"></div>   </div> 

 

 

 

 

 

 

 

 

© 著作权归作者所有

yxxz
粉丝 0
博文 3
码字总数 4761
作品 0
广州
私信 提问
好程序员分享大势所趋 HTML5成Web开发者最关心的技术

好程序员分享大势所趋 HTML5成Web开发者最关心的技术,最近,在Stack Exchange上出现了一个比较热门的问题:Web开发者最头疼的问题是什么?结果并不是大家通常认为的兼容性问题,而是关于HTM...

好程序员IT
04/17
10
0
CSS实现水平垂直居中的10种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将...

颜海镜
2018/09/13
0
0
HTML(超文本标记语言)之【动态网页】

HTML前面已经介绍,所以CSS和JavaScript就是我们今天的主要内容。 CSS全称是级联样式表(Cascading Style Sheets)。解决内容与表现分离的问题 样式解决了一个普遍的问题 HTML 标签原本被设计...

ayesd
2014/07/17
77
0
关于浏览器的兼容问题

关于浏览器的兼容问题 1. 什么是 CSS hack 根据百度的简述:CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如...

熊蛋子17
2017/11/23
0
0
CSS基础代码库--Nice UE

一、关于 Nice: Nice 是轻量的CSS基础代码库,没有一味的重置,而是 ,减小开发难度。 Nice只重置掉可能产生问题的样式(body、form的默认margin等),并且解决了一些可能产生的兼容性问题,...

匿名
2012/03/20
5.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
38分钟前
6
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
40分钟前
4
0
IE之css3效果兼容

本文转载于:专业的前端网站▷IE之css3效果兼容 一、兼容css阴影效果(ie滤镜) 1.Shadow,阴影 .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-sha...

前端老手
43分钟前
4
0
NiushopB2C开源商城功能列表说明:

B2C单商户免费版:PC商城+微商城 B2C单商户标准版:PC商城+微商城组合套餐+阶梯优惠核销功能 B2C单商户企业版:PC商城+微商城拼团+组合套餐阶梯优惠+核销功能 B2C单商户分销版:PC商城+微商城...

niushop-芳
44分钟前
4
0
图片如何转GIF图片呢

如何将生活中拍摄的好玩有趣的图片制作成GIF动图呢?相信很多小伙伴都不知道要如何制作,其实制作方法非常的简单,下面分享一个图片转GIF动图的方法,希望这个方法能够帮助大家在与好友斗图时...

白米稀饭2019
51分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部