兼容firefox和ie的javascript的一些写法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
兼容firefox和ie的javascript的一些写法
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
你可能喜欢CSS样式IE浏览器跟火狐浏览器兼容写法_最火下载站
您的位置： >
> CSS样式IE浏览器跟火狐浏览器兼容写法
CSS样式IE浏览器跟火狐浏览器兼容写法
前台样式最烦人的就是各种浏览器跟分辨率的 兼容问题 首先需要了解各个浏览器之间样式在哪几方面容易出问题 IE支持自定义光标文件cursor:url() IE支持自定义滚动条颜色风格 IE6中的select有永远处在最上的bug,而且css对select不起作用。 在form中，IE支持label，包括文字和图片；但是火狐不支持图片的label， 点击图片不能让label for的radio或者checkbox产生效果。 IE和火狐都是支持onscroll事件的，但是火狐中textarea对此事件不支持。 CSS方面，IE中支持在CSS中嵌入expresion，而Firefox不支持 火狐支择相邻子选择符&&&，而IE6不支持（IE7支持） 火狐对display的inline-block不支持，而IE均支持。 CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和火狐存在很大的解析差异，这里介绍一下兼容要点。 对高度的解析 IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度 火狐：没有定义高度时，如果内容中包括了图片内容，火狐的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。 结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！ img对象alt和title的解析 alt：当照片不存在或者load错误时的提示； title：照片的tip说明。 在IE中如果没有定义title，alt也可以作为img的tip使用，但是在火狐中，两者完全按照标准中的定义使用 结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用 其他的细节差别 当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在火狐里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。 其实这里还有另外一个问题，就是IE对于空格的处理，火狐是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。 非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在火狐里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。 后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和火狐的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。 10大兼容要点 1、DOCTYPE 影响 CSS 处理 2、火狐: div 设置margin-left, margin-right 为 auto 时已经居中, IE 不行 3、火狐: body 设置 text-align时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4、火狐: 支持!important, IE 则忽略, 可用 !important 为火狐特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上 5、div 的垂直居中问题: vertical-align: 将行距增加到和整个DIV一样高line-height:200 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 6、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 7、火狐: 链接加边框和背景色，需设置display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。 8、在火狐和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!margin:28} 注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写{margin:XXpx!} 9、ul标签在火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;} 接下来就是IE6/IE7/IE8以及中兼容样式的写法 IE6：top｛_width:100｝此种方法只有IE6可识别IE7/8跟火狐无法识别 IE7：*+htmltop{width:100}此种方法只有IE7可识别 IE6/8跟火狐无法识别 IE8：top{width:100} 火狐：:root body top{width}此种写法仅火狐能识别 IE 浏览器无法识别 如果只让ff、IE8看见用html&/**/body .head{color:#000;} 如果只是不让ie6看见用html&body.head{color:#000;} 即对IE 6无效 如果只是不让ff、IE8看见用*body.head{color:#000;} 即对ff、IE8无效 html*{color:#f00} 支持IE6 IE7 不支持 IE8 FF body&p{color:#f00} 支持IE7 IE8 FF 不支持 IE6 html[xmlns] p {color:#f00} 支持 IE7 IE8 FF 不支持 IE6 @import &style.css& @import &style.css& @import url(style.css) @import url('style.css') @import url(&style.css&) 支持 IE6 IE7 IE8 FF P{/*/*color:#f00;/* */} 支持 IE6 IE7 FF 不支持 IE8
上一篇： 下一篇：1. WEB标准是什么？
& & &WEB标准&是一系列标准的总称。一般的误区经常把WEB标准说成DIV+CSS。准确的说法应该是：采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页面的方法。DIV 应该指的是XHTML标签，而CSS 指的是样式表。
2. 采用WEB标准开发的好处
　　2.1 节约运营成本
　 &&2.2 用户友好性
　　2.3 内容跨平台的可用性
　　2.4 加快页面解析速度
　　2.5 更良好的用户体验
3. 名词解释
　　1. 横切
　　　　页面中950px宽并且对高度没有限制的容器称为一个标准横切。
　　2. 留白
　　　　两个容器或碎片之间的上、下、左、右的空白距离。
　　3. 继承
　　　　元素可以从其父级元素中获得一些可为自己使用的属性或值。
　　4. 图片定位
　　　　把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图。
　　5. 底图
　　　　页面中在标签中使用的背景图。
　　6. 齐底（图）线
　　　　用户区分横切或碎片结束的线或图。
　　7. 页面结构
　　　　页面的基础框架，由横切、布局元素组成。
　　8. 焦点区（图）
　　　　最易注意的区域。
　　9. 导航
　　　　在页面中具有导向性的链接集合。
　　10. 头图
　　　　页面主题图片。
　　11. 间距
　　　　碎片或文字间的距离。
　　12. 行高
　　　　文字段落中行与行之间的距离。
　　13. 首行缩进
　　　　文字段落首行缩进。
　　14. 浮动
　　　　使被定义的区域脱离正常的页面文档流。
　　15. 碎片
　　　　由文字、图片组合成的内容区域。
　　16. 通栏广告
　　　　与页面内容区同宽的广告区域。
　　17. 功能按钮
　　　　具有交互属性的功能按钮。
　　18. 私有样式
　　　　当前页面独立使用的样式，不具备公用性。
　　19. 水平（垂直）居中
　　　　在页面中的某个元素处于父级的上下或左右的相同距离。
　　20. 标准头（尾）
　　　　定义相同的页面头或尾元素集合。
4. 常用技术术语
　　1. 浮动： float
　　2. 宽： width
　　3. 高： height
　　4. 块元素： block
　　5. 背景： background
　　6. 无序列表：ul
　　7. 链接： a
　　8. 表单： form
　　9. 图片： img
　　10. 段落： p
　　11. 文档类型定义： DTD
　　12. 字体： font-family
　　13. 字号： font-size
　　14. 边框： border
　　15. 文字对齐： text-align
　　16. 行高： line-height
　　17. 字色： color
　　18. 背景不循环： no-repeat
　　19. 内边距： padding
　　20. 外间距： margin
　　21. 显示方式： display
　　22. 悬停： hover
　　23. 文字修饰： text-decoration
　　24. 上： up
　　25. 底： bottom
　　26. 左： left
　　27. 右： right
　　28. 自动： auto
　　29. 粗体： bold
　　30. 正常： normal
5. 一些约定
　　良好的命名习惯，对一个WEB标准网站的开发来说，必定事半功倍。以下是常用的一些命名习惯：
　　1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
　　2. 样式名尽量语义化或简写；
　　3. 样式名需要组合拼写时，采用驼峰式拼写，即：KeyWord；
　　4. 使用px（像素）为基本计量单位；
　　5. 页面中空格的使用：全角：中文空格 &半角： &
　　6. 项目完成包中，文件及及文件名称全部采用小写字母，不使用中文文件名；
　　7. 减少DIV的嵌套层数；
　　8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title；
　　9. 使用正确的注释方法；
　　10. 非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，如:style,font等；
　　11. 双标记签都要有开始和结束标签，单标记标签的后面一定要加&/& ，如&br/&， 并且有正确的层次；
　　12. 其它特殊符号：
　　　　1） & ( & )
　　　　2) && ( & )
&6. 命名空间
　　6.1 外挂样式名称
　　　　全局： global.css
　　　　　　全局样式为公站公用，为页面样式基础，页面中必须包含。&
　　　　结构： layout.css
　　　　　　页面结构类型复杂，并且公用类型较多时使用。多用在首页类页面及产品类页面中。
　　　　私有： style.css
　　　　　　独立页面所使用的样式文件，页面中必须包含。
　　　　模块： module.css
&　　　　　　产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
　　　　主题： themes.css
　　　　　　实现换肤功能时应用。
　　　　补丁： mend.css
　　　　　　基于以上样式进行的私有化修补。
　　6.2 常用名称
　　　　头：header　　　　
　　　　尾：footer
　　　　Logo： logo
　　　　版权： copyright
　　　　内容块：content
　　　　栏目块：column
　　　　结构左：left
　　　　结构中：center
　　　　结构右：right
　　　　矩阵导航：matrixNav
　　　　首页导航：indexNav
　　　　频道二级：channelNav
　　　　导航文字：navText
　　　　内容导航：nav
　　　　内容主导航：mainNav
　　　　子内容导航：subNav
　　　　边导航：sidebar
　　　　左导航：leftsidebar
　　　　右导航：rightsidebar
　　　　广告：ad
　　　　搜索：search
　　　　关键字：keyWord
　　　　标签：tag
　　　　菜单：menu
　　　　滚动：scroll
　　　　列表：list
　　　　下拉：drop
　　　　按钮：btn
　　　　登陆：login
　　　　登陆条：loginbar
　　　　注册：reg
　　　　提示信息：msg
　　　　打印：print
　　　　地图：map
　　　　功能区：shop
　　　　Flash：flash
　　　　标题：title
　　　　更多：more
　　　　博客：blog
　　　　视频：video
　　　　媒体：media
　　　　新闻：news
　　　　热点：hot
　　　　评论：review
　　　　合作：cooperate
　　　　联系：contact
　　　　加入我们：joinUs
　　　　合作伙伴：partner
　　　　友情链接：link
　　　　论坛社区：club
　　　　投票：vote
　　　　摘要：summary
　　　　服务：service
　　　　指南：guild
　　　　描述：description
　　　　信息：info
　　　　状态：status
　　　　注释：note
　　　　下载：download
　　　　价格：price
　　　　地址：address
　　　　产品：products
　　　　跳转：jump
　　　　条：bar
　　　　线：line
　　　　小技巧：Tips
7. 基本设置-global.css
　　7.1 全局设置
　　　　文字（text-align）：align（居中）
　　　　上下边距(margin, padding)：0
　　　　左右边距（margin）：auto（自动）
　　　　底色（background）：#FFF（白色）
　　　　字体（font-family）、字号（font-size）、字色（color）："宋体& 12px #666
　　　　body 内容整体居中 ： body&div　
　　　　全局CSS定义
　　　　/* 全局CSS 定义 */　　　　body{margin:0padding:0;background:#FFF;color:#666;font:12px '宋体';text-align:}　　　　body & div{margin-right:margin-left:text-align: }　　　　div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}　　　　h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12font-weight:}　　　　ul,ol,li{list-style:none}　　　　table,td,input,textarea{font-size:12px}
7.2 页面标签初始化设置
　　1. 常用基本标签 div， form， ul， ol， li， span, p, dl, dt, dd, img
　　　　设置基本标签的间距、边框默认值为0.
　　2. h1~h6 标题
　　　　默认标题内字号 12px， 内外间距为0px， 文字不加粗。
　　3. ul，ol，li 列表
　　　　默认不显示项目符号。
　　4. h2 栏目标题
　　5. 默认链接颜色
　　　　常态下不显示文字下划线，颜色为灰（#333），鼠标悬浮时：显示文字下划线，颜色变为暗灰（#CCC）
7.3 页面宽度
　　默认页面宽（area）：950px
7.4 .clear
　　结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。
9.2 推荐样式拼写顺序
　　1. 显示与定位： display, position, float, list-style
　　2. 元素自身： width, height, margin, padding, border, background
　　3. 文本外观：&&color, font, line-height, text-align, text-decoration, other
& & & 例：
& & & & & .test{float:width:950margin:10background:#color:#000;}　　
9.3 样式编写规则
　　1. 遵循W3C XHTML 代码编写规范
　　2. 优先公用样式，其次结构、再碎片，合并相关元素属性，按从大到小排列。
　　3. 样式中使用修饰图遮罩方法，将公用图片的样式名称复写定义。
　　4. 继承样式定义，多级关系可省略多级父元素名称，至少包含最外层父元素名称，独立碎片除外。
　　5. 横切以#contentA，#contentB...定义，且公用样式和横切加注释说明。
　　6. 样式定义简写，替除多余空格字符。
12 浏览器兼容
　　12.1 兼容浏览器及兼容要求
　　　　1. IE浏览器： IE6.0, IE7.0
　　　　2. Firefox浏览器
　　　　3. Opera浏览器
　　　　4. Safari浏览器
　　　　所定义样式语法定义在常用浏览器中显示无结构、颜色、效果差异。
　　12.3 各版本浏览器HACK&/ 12.4.1 浏览器兼容的一般写法
　　　　区别各版本浏览器的样式方法，注意样式定义顺序。
　　　　当需要解决浏览器兼容问题时，一般采用下面写法可以解决，如margin问题：
　　　　margin:8px: 正常语法，所有浏览器都能够正常解析
　　　　*margin:9px: 针对IE7.0的特殊写法，只针对IE7.0以上的浏览器有效。
& & & & & &_margin:10px: 针对IE6.0的特殊写法，只针对IE6.0 以上浏览器有效。
　　　　_margin/**/:10px: 针对IE5.0的特殊写法。 IE6.0不支持，IE7.0支持。
　　12.4.3 Firefox浮动层背景图不能自动平铺
　　　　嵌套DIV，当子div为浮动（float）时，父div的高度在Firefox不能根据子DIV自动变化。浏览器高度不能自动计算。导致的结果是当父层div有背景色和背景图时不能自动平铺。
　　　　解决办法是：给父层div 添加样式clear 清除浮动，这样父div 就会随子div高度自动计算，如下代码：
　　　　.clear:after{content:".";display:height:0;clear:visibility:}
17 代码书写规范
　　17.1 注释
　　　　17.1.1 HTML注释
　　　　正确的注释规范：&!-- 这里是注释 --& 感叹号后面2个横线，结束时2个横线
　　　　17.1.2 CSS样式注释
　　　　由于 CSS+DIV 制作页面，样式代码多，布局比较复杂，更便于页面后期的维护，更改。所以有必要在样式中加上注释。注释规则如下：
　　　　/* 这里是注释 */
　　17.2 缩进
　　　　根据页面代码结构进行包含缩进，这样代码层次结构清晰。
　　17.3 回车
　　　　同级间结构或碎片代码块之间添加换行。
【本文内容摘自：搜狐WEB标准_前端技术应用规范】
阅读(...) 评论()仅针对IE8有效的CSS Hack猎奇写法
作者：于江水
字体：[ ] 来源：yujiangshui 时间：05-13 11:07:57
CSS Hack的目的是兼容各种浏览器,然而IE总是个例外的存在,特别是IE8,而IE8又是Windows 7的IE的默认内置版本...偶然尝试出了仅针对IE8有效的CSS Hack猎奇写法,下面与大家分享一下:
最近做项目的时候，引用了 Google Font 的在线字体，估计是因为浏览器对字体的渲染方式不同或者是字体格式不一样，结果导致 IE8 中导航是错位的，而 IE9 和 IE10 中是正常的。
那么就需要单独为 IE8 进行一些调整，于是就需要 IE8 的 CSS hack。一看到这里，足够容易了吧？网上流传已久的 IE8 CSS hack 就是在属性后面加上 \9 或者 \0，代码如下：
color:#FFF\0;&&&&&&&&&&&&&&&&&&&&&&
color:#FFF\9;&&&&&&&&&&&&&&&&&&&&&&
加上之后，发现 IE8 确实是没有问题了，但是 IE9 和 IE10 却出现了问题，上面的 hack 同样对 IE9 和 IE10 起作用。
好吧，这个 CSS hack 不是 IE8 特有的。那怎么做才能只针对 IE8 做 hack 呢？
这里的思路需要稍稍转换一下：可以先应用 IE8 的 hack ，与非 IE 浏览器分开，然后再应用一些 CSS3 之类的 IE8 不支持的选择器来重新覆盖一遍，让支持新选择器的 IE9、IE10 正常显示。符合条件的常用选择器有 :root，于是就可以写出下面代码：
.section-nav&li&a&{ &&
&&display:█ &&
&&padding:&10px&13px; &&
&&padding:&10px&7px&&10px&7px&\9; &&
&&border-right:&1px&solid&#d7d7d7; &&
:root&.section-nav&li&a&{ &&
&&padding:&10px&13px&10px&13px; &&
这样就做到了只对 IE8 浏览器起作用的 CSS hack，这种方法后来搜索了一下，早就有人提到了，写本文主要是介绍一下这个解决浏览器兼容性问题的思路吧。
再次感叹，微软神奇的IE，在开发中不得不让人抓狂。为IE6、IE7等等，都是比较好hack的，唯独IE8比较坑一点。
大家感兴趣的内容
12345678910
最近更新的内容　　目前，文字信息仍是网站最主要的内容，随着CSS3技术的不断成熟，Web字体逐渐成为话题，这项让未来Web更加丰富多彩的技术拥有多种实现方案，其中之一是通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这项技术，本文介绍主要的几种Web字体格式及各浏览器兼容情况。
Web字体格式介绍
TrueType (.ttf)
　　Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
EOT & Embedded Open Type (.eot)
　　嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中 @font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。
OpenType (.otf)
　　OpenType是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO，现行标准为OpenType 1.4。OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。
WOFF & Web Open Font Format (.woff)
　　相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来
SVG (Scalable Vector Graphics) Fonts (.svg)
　　顾名思义，就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。
字体格式转换工具
这个工具我刚用过，非常好用的一个工具，用于把TTF文件转为EOT格式。
Microsoft WEFT
微软提供的字体格式转换工具。
可以转换TTF文件为EOT格式。
另外推荐几个在线的转换工具：
如果想把OTF文件转为TTF格式，可以使用来转换。
浏览器兼容性一览
　　使用CSS3的@font-face属性可以实现在网页中嵌入任意字体，但是IE只支持微软自有的EOT格式字体，而其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体，浏览器对@font-face属性及各种字体格式支持详的细情况如下：
Browser@font-faceTrueTypeWOFFEOTSVGSVGZ
（来源：& 原文：）
阅读(...) 评论()