容我织梦 » ff

[ 总结]浏览器兼容手册

Frog — Mon, 23 Nov 2009 01:42:13 +0000

浏览器兼容手册
1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3. clear:both;
不想受到float浮动的，就在div中写入clear:both;
4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. padding 问题
FF设置 padding 后，div会增加 height 和 width，但IE不会（* 标准的 XHTML1.0 定义 dtd 好像一致了）
高度控制恰当，或尝试使用 height:100%;
宽度减少使用 padding
但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义
6. div嵌套时 y 轴上 padding 和 marign 的问题
FF里 y 轴上子div 到父div 的距离为父padding + 子marign
IE里 y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个
FF里 y 轴上父padding=0 且 border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面
7. padding，marign，height，width 的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
宽尽量用margin，慎用padding，width算准实际要的减去padding
列表类
1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}
显示类
1. display:block,inline 两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度

，

，
，
和
是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
，，，，，和是 inline 元素的例子
2. 鼠标手指状显示
全部用标准的写法 cursor: pointer;
背景、图片类
1. background 显示问题
全部注意补齐 width，height 属性
2. 背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

强制Firefox显示滚动条

Frog — Thu, 19 Nov 2009 05:32:05 +0000

我们知道，在页面高度不够时候，FF火狐浏览器是默认没有滚动条的。但是当页面在加载完了之后，如果页面够长，会出现稍微的闪动（偏移）。这里我们强制FF在开始的时候就有滚动条，这样，就不会出现那样的现象了。

其实，实现过程也不是很复杂，具体看例子：

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

强制Firefox显示滚动

强制Firefox显示滚动条：

方法一：html {overflow:-moz-scrollbars-vertical;}

方法二：html {min-height:101%;}

为什么要强制显示滚动条？因为在Firefox你会发现页面在没有加载完全的时候是没有滚动条的，当加载完成后滚动条才显示出来，所以会感觉页面偏移了下。

ie 和ff对css的缩写都存在的问题

Frog — Wed, 14 Oct 2009 03:15:12 +0000

1. 在IE里用body {text-align: center;}就可以居中对齐.到了firefox里总是在左边.但是如果加了float: right;还能到右边就是不能到中间..FF下面设置容器的左右外补丁为auto就可以了，如: margin:0 auto;
2. 是 ie对于css的magin padding 等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。
3. 对css缩写的支持问题：不论是ie 还是ff对css的缩写都有一小点问题,比如:border: 0xp solid #fff;两个浏览器支持都没有问题,但如果四个边的magin不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形

正确缩写：
border-width:0px 1px 2px 3px;
border-style:solid;
border-color:#fff;

IE和FF中css透明度的继承问题

Frog — Wed, 15 Apr 2009 14:15:08 +0000

我想大家在工作或者学习的时候也同样会遇到这样的问题。就是这个讨厌的透明度继承的问题，具体问题表现就是，当我们给外面的父容器设置的透明的时候，厘米那包括的子容器也就继承的父容器的透明度。
其实办法也有几种，下面就是说一下其中的两个解决办法：
1. 如果是IE浏览器，就可以给子容器添加一个相对定位来解决，也就是：position:relative;如果是火狐firefox等就可以使用png：background:url(images/png.png);
然后单独设置IE的背景：*background:#fff; （*号只有IE可识别）
2.其实第二种办法也是见到的用的最多大的，首先，设置3个容器，让需要透明的容器和不透明容器保持兄弟关系。然后，通过父容器控制大小让两个兄弟容器通过定位保持一个看似父子的排列方式。这样就另辟蹊径的解决了这个问题。
可能还有其他的更好的办法，也希望大家一起来研究。

去除链接元素的虚线框（兼容IE7、IE6、FF）

Frog — Wed, 10 Dec 2008 15:13:47 +0000

在浏览器里，鼠标点击时有虚线框，很影响美观。这里我们把它去掉，不说教，看代码！

[code] [/code]
把这个文件另存为***.htc即可。
HTML代码：

www.sonyes.cn

CSS样式：
[code]a {
　　display:block; 　　
width:120px;
　　height:60px;
　　line-height:60px;
　　text-align:center;
}
a:hover {
　　background:#eee
}[/code]

在a标签的样式内加入一条，消除链接的虚线边框：

[code]a {
　　display:block;
　　width:100px;
　　height:30px;
　　line-height:30px;
　　text-align:center;
　　behavior:url(line.htc);
}[/code]

兼容火狐的超出文字加省略号

Frog — Thu, 04 Dec 2008 14:15:44 +0000

有时候很忙，不知道忙什么，可能就是大家说的瞎忙。
前段时间都在每篇日志前加一副表示心境的图片，后来由于各种原因，还是没坚持，有时候觉得没必要。

开始就啰嗦了这么多没用的，可能你都急了，快放代码啊！[Rhug]
嗯，也是，我也是百度谷歌雅虎的时候懒得看那些啰啰嗦嗦的说教，直接放出代码，在实践里总结学习，这样总比理论来的好很多！有啰嗦了[Belial]

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

青蛙扑满的个人池塘-网站开发者的乐园

千万的变化，不要直接复制到你的页面里，大概看看修改一下！别太懒了。。。

今天无意中在以前的收藏里看到另一个办法，MS比上面这个要好一些！也发上来吧
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

用css来实现自动截取文字，不需要后台程序和JS的使用

好处是：有利于内容完整性，有利于SEO，无需后台程序处理，可以在前台随时调节要截取的长度。

不好的地方：不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。

另外在设置截取宽度的时候，要注意，尽量让文字截取完整

Web标准化 www.div-css.com

【firefox插件】Web Developer 1.1.6(最新版本，中文版)

Frog — Sun, 23 Nov 2008 15:29:54 +0000

仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口，就能一窥它的强大。推荐网页开发者和网页设计者使用，能够帮助你方便的对页面进行调整和完善;
Web 开发者扩展添加一个工具菜单项和一个工具栏到浏览器以提供各种各样的 Web 开发工具。这是一个对 web 开发人员非常有用的扩展，它可以高效的查看一个网页所包含的所有元素甚至更多，例如：
检查页面包含的所有 css 设定；
检查页面的所有 javascript；
调用 dom inspector 查看dom对象；
对改页面添加用户自定义的 css 文件（这样你可以一次用自己不同版本或主题的 css 文件来检查不同的 layout 情况，而完全不需要在多个页面版本之间切换）；
过滤图片，可以设定隐藏图片，标注没有 alt 标签或者没有 title 标签的图片，以确定你的页面是否更加符合 WAI 的要求；
Resize 网页浏览区域大小，以便于确定在不同分辨率情况下的页面 layout 情况；
可以调用几乎所有的标准化校验器, 包括 css, html, wai, link 等校验器，这样能够非常高效的进行标准化校验而不需要在几个不同的校验器之间烦人的切来切去；
多种概要（outline）功能，比如 outline 区块，outline 不推荐使用的标签，outline 标记表格等等；
仪表板信息显示功能，可以方便的定位在左边, 右边或底部来显示各种信息;　　
还有标尺、十字引导线、页面放大镜、显示隐藏元素等等 …..。
你只要逐个使用菜单或工具栏每一个主要功能按钮，都会让你有不少的惊喜。把这么多有用的特性集成在一起，可以大大提高开发的效率，而且让你对你的页面会有一个更全面地特性概览。

Web Developer 1.1.6下载：https://addons.mozilla.org/zh-CN/firefox/addon/60

如果你和我一样是个E文盲，那么点这里下载Web Developer 1.1.6中文版：http://www.rayfile.com/files/65b90f87-4c1e-11dd-94c6-00142218fc6e/

Web Developer 1.1.6中文版说明：
因为下午要用，然后现在用了Firefox 3.0 旧的1.1.4的版本用不上，去找了一下，有1.1.6但官网上现在只有英文版的，我就用1.1.4的资源文件拉进去替换掉，试用还OK，发给大家共享一下，

火狐浏览器CSS兼容的解决方法

Frog — Sat, 27 Sep 2008 02:30:20 +0000

来源：firefox官方网

1.DOCTYPE 影响 CSS 处理

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

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

7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

9.在 mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法! important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx! important;

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

注意事项：

1、float的div一定要闭合。

例如：(其中floatA、floatB的属性已经设置为float:left;) < #div id=”floatA” >
< #div id=”floatB” >
< #div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在 < #div class=”floatB”>
< #div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可： .clear{
clear:both;}此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义： .colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
< #div id=”imfloat”>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

3、关于容器的包涵关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题

如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

5、最狠的手段 – !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下 .tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过

IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：

现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999.

min-height最小高度的实现（兼容IE6、IE7、FF）

Frog — Sun, 03 Aug 2008 07:53:59 +0000

CSS的兼容性问题一直令CSSer头疼，最小高度min-height是一个非常有用的属性，在页面布局中的很多地方可以用到。在52CSS.com的一些实例布局中也有涉及。

　　当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
　　min-height属性并非所有浏览器都兼容，主要问题还是出现在IE6，这个不支持标准的浏览器偏偏占据很大的用户群体，虽然IE7发布很久了，IE8正式版也快发布了，但IE6依然有着众多的用户。实在让CSSer非常无奈。
　E6对于overflow的特殊实现，给我们实现min-height提供了一个思路，所以产生了以下兼容IE6、IE7、FF浏览器的min-height写法：

#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}

　我们查看最终的运行效果，您可以编辑内容后再运行，以便查看内容少与内容多时出现的变化。

Firefox下透明Flash热点丢失的 bug

Frog — Fri, 14 Mar 2008 03:38:02 +0000

Firefox下打开Qzone的导航的按钮焦点就无法点击，经过调试发现，三种情况混在一起使用的时候透明的flash导航的链接就出现异常了。

1. margin 设置了0px (一般的dom都默认是0)
2. overflow设置了 hidden, auto, scroll 其中一个
3. flash是设置了透明

[html]

[/html]
解决方案给设置了overflow的dom设置非0像素的margin,例如 margin:0.1px

容我织梦 » ff

[ 总结]浏览器兼容手册

强制Firefox显示滚动条

ie 和ff对css的缩写都存在的问题

IE和FF中css透明度的继承问题

去除链接元素的虚线框（兼容IE7、IE6、FF）

兼容火狐的超出文字加省略号

【firefox插件】Web Developer 1.1.6(最新版本，中文版)

火狐浏览器CSS兼容的解决方法

min-height最小高度的实现（兼容IE6、IE7、FF）

Firefox下 透明Flash热点丢失的 bug

Firefox下透明Flash热点丢失的 bug