webcelement
- 浏览: 37570 次
- 性别:
- 来自: 天津
-
最新评论
兼容性处理要点
1、DOCTYPE 影响 CSS 处理
2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width
3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式
4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
浏览器差异
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。
[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
2、CSS透明问题
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。
3、CSS圆角问题
IE：ie7以下版本不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。
4、cursor:hand VS cursor:pointer
问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。
解决方法：统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。
解决方法：使用指定的字体大小如14px。
并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。
6、CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
浏览器bug
1、IE的双边距bug
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案：在这个div里面加上display:inline;
例如：
<#div id=”imfloat”>
相应的css为
以下为引用的内容：
复制代码代码如下:
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。
2、IE选择符空格BUG
今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。
请看以下代码：
复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
</html>
复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
</html>
这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。
详细出处参考：http://www.jb51.net/css/23232.html
1、DOCTYPE 影响 CSS 处理
2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width
3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式
4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
浏览器差异
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。
[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
2、CSS透明问题
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。
3、CSS圆角问题
IE：ie7以下版本不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。
4、cursor:hand VS cursor:pointer
问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。
解决方法：统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。
解决方法：使用指定的字体大小如14px。
并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。
6、CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
浏览器bug
1、IE的双边距bug
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案：在这个div里面加上display:inline;
例如：
<#div id=”imfloat”>
相应的css为
以下为引用的内容：
复制代码代码如下:
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。
2、IE选择符空格BUG
今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。
请看以下代码：
复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
</html>
复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
</html>
这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。
详细出处参考：http://www.jb51.net/css/23232.html
分享到：
发表评论
-
我的CSS框架-base.css
2015-04-13 10:19 529@charset "utf-8"; /*! ... -
HTML中自定义字体
2014-05-22 11:03 896@font-face { font-family:trebu ... -
css属性之display:inline-block
2013-01-06 11:14 777引用: 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁 ... -
dl dt dd
2012-12-28 11:03 671dl:definition list dt:definitio ... -
内联元素加上浮动就变成了块级元素
2012-11-20 10:19 837内联元素加上浮动就变成了块级元素 -
三像素文本漫溢
2012-11-20 10:14 737三像素文本慢移：如果无名线框（包含内联内容的框）邻近某个浮动， ... -
网页背景从上到下的渐变
2012-10-31 16:30 868<body leftmargin="0&quo ... -
加入收藏
2012-10-31 16:23 961<Script Language="Jav ... -
HTML文件HEAD内部标记浅析
2012-10-31 16:15 699今天，使用各种所见即 ... -
半透明图层
2012-10-31 16:11 623<style type="text/css&q ... -
表格边框为1像素自定义颜色
2012-10-31 15:03 1179table{ border:1px solid #94919 ... -
爱恨原则
2012-07-12 09:06 880【经验】在CSS中定义a:link、a:visited、 ... -
兼容所有浏览器的圆角
2012-07-06 13:39 684<!DOCTYPE HTML> <html& ... -
css行内文本超出指定宽度溢出的处理
2012-03-28 14:53 1400一般文字截断： .text-overflow{ ... -
识别IE6的代码
2012-03-13 14:40 629将要在IE6里显示的内容和样式写在<!--[if lte ... -
理解绝对定位和相对定位
2012-03-13 11:10 543概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、 ... -
Javascript中最常用的55个经典技巧
2012-03-08 16:53 6391. oncontextmenu="window. ... -
按钮鼠标悬停时手势
2012-03-08 16:11 1017<button name="submit&qu ... -
点此打印代码
2012-03-07 15:32 660<!DOCTYPE html PUBLIC " ... -
CSS字体调用
2012-03-05 09:31 2045<!DOCTYPE html PUBLIC " ...
相关推荐
兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 3、FF: 支持 !important， IE 则忽略， 可用 !...
混合信号电路PCB的设计很复杂，元器件的布局、布线以及电源和地线的处理将直接影响到电路性能和电磁兼容性能。本文介绍的地和电源的分区设计能优化混合信号电路的性能。
关于div+css兼容IE和firefox的问题 好不容易建立的div+css网页完全符合W3C标准。在ie7下显示非常完美，用firefox一测试，乖乖一...CSS 兼容要点：DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 a
CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。 常见兼容问题： 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中,...
DM64x系列DSP的优势、特点、软硬件设计要点（结合视频处理应用实例）： l 视频处理系统对系统特殊要求 n 高速处理能力 n 大容量存储器 n 高速数据通道 n 专用的视频接口 l DM642对音视频处理的支持 n DM642的在会议...
以下是该解决方案的关键组件和要点： 一、充电桩设计 通用性：充电桩应设计为适用于多种品牌和型号的电动汽车，确保广泛的兼容性。 智能化：充电桩应具备智能化的充电管理功能，包括自动识别车辆、选择合适的充电...
此应用笔记包括使用微处理器进行设计过程中可能遇到的大部分常见的EMC问题。文章将简要的讨论各种不同的现象。本文参考文献对EMC设计讲述更加详细，对于需要设计满足EMC兼容产品的设计师而言，强烈建议对参考文献...
* Android拍照、调用系统相册、图片裁剪（兼容6.0权限处理及7.0以上文件管理） * * * 本文Demo包含以下要点： * 1、Android6.0运行时权限封装(避免用户选择不再提示后无法获取权限的问题) * 2、Android7.0 ...
电磁兼容性设计和基于总线和接口标准(PCIExpress)的数据传输和处理软件设计。在实现了系统硬件的基础上． 采 用Xilinx公司ISE软件的在线逻辑分析仪(ChipScope Pro)测试了ADC和采样时钟的性能，实测表明整体指标达到...
处理回购，要点和Wiki中的文件 支持任何 支持直接在GitHub上编辑和创建文件和Wiki页面 简单而朴实 安装 :red_heart_selector: :green_heart: :blue_heart: :purple_heart: 关于Safari的注意事项：尚未将...
近年来，随着计算机、网络以及图像处理、传输技术的飞速发展，视频监控技术也有了长足的发展。在视频技术不断的发展情况下,视频监控目前可分为两大类:数字视频监控系统和网络监控( 嵌入式视频监控系统 )。 解决视频...
X2 R20120628更新要点：FIX 修正搜索接口错误调用了implode()函数问题FIX 好友申请附言问题FIX 前台管理中已经审核通过文章，后台还是提示审核的问题FIX QQ互联暴露匿名帖用户信息的问题FIX 专题模块可使用字段说明...
X2 R20120628更新要点：FIX 修正搜索接口错误调用了implode()函数问题FIX 好友申请附言问题FIX 前台管理中已经审核通过文章，后台还是提示审核的问题FIX QQ互联暴露匿名帖用户信息的问题FIX 专题模块可使用字段说明...
近年来，随着计算机、网络以及图像处理、传输技术的飞速发展，视频监控技术也有了长足的发展。在视频技术不断的发展情况下,视频监控目前可分为两大类:数字视频监控系统和网络监控( 嵌入式视频监控系统 )。 解决视频...
【软件介绍】 什么叫蒙太奇图片？蒙太奇 (montage) 在法语...这两个地方跟原版一样，不是汉化导致，各计算机系统环境各不相同，因此不保证该软件完全兼容，最终解决软件安装运行问题请联络官方站点寻求相关技术支持。
第1章 嵌入式系统概论 本章要点： 嵌入式系统简介 常见嵌入式微处理器及其选型 嵌入式操作系统的特点 常见嵌入式操作系统及其特征比较 1.1 概 述 嵌入式技术是近年来风靡全球的热点技术，从手机到电子书，从音频视频...
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样，可用的属性方法就不一样。不过，所有的事件都会有下表列出的成员。 下面列出了 2...
3.1.6 XHTML兼容性 3.1.7 客户端控件ID 3.2 Web窗体处理阶段 3.2.1 页面框架初始化 3.2.2 用户代码初始化 3.2.3 验证 3.2.4 事件处理 3.2.5 自动数据绑定 3.2.6 清除 3.2.7 页面流示例 3.3 ...
FIX 存档后主题分页出错时的兼容处理 FIX DIY模块调取含有$和\字符时模板解析出错的问题 FIX 关于专题评论后的伪静态链接错误问题。 FIX 修正由存档表引起的分页错乱的BUG FIX 后台管理...