当前位置：文档库 › CSS_for_IE6_IE7_FF兼容基本方案

CSS_for_IE6_IE7_FF兼容基本方案

CSS for IE6,IE7,FF兼容基本方案

滤镜效果IE和FF方法。

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity: 0.5;

检测表单中Radio元素

function radio_value(name){

var obj = document.getElementsByName(name);

for(i=0;i

{

if(obj[i].checked)

return obj[i].value;

}

选择卡JS控制代码

function setTab(name,cursel,n){

for(i=1;i<=n;i++){

var menu=document.getElementById(name+i);

var con=document.getElementById("con_"+name+"_"+i);

menu.className=i==cursel?"now":"";

con.style.display=i==cursel?"block":"none";

}

A标签加rel="sidebar"能实现FF兼容

去除a button 标签点击时的虚线

方法1(批量处理): CSS样式：a {blr:expression(this.onFocus=this.blur())} 方法2(单个处理): 去掉链接上的虚线框可以在链接里面加入

onfocus="this.blur();"就可以去掉虚线框了

方法3(批量处理):

写一个htc文件any.htc，和上一个html在同一个目录下：

再在CSS中加入如下代码:A { behavior:url(any.htc); }

用clear:both标签清除元素自己的浮动在IE7及以下浏览器，默认允许在自己元素的水平面上能有其它元素是浮动的。

但火狐不允许该写法.火狐下或IE下要完成此布局直接设定clear标签清除其左边还是右边;

target="_blank":在新窗口中浏览新的页面。

target="_self":在同一个窗口打开新的页面。

target="_parent":在父窗口中打开新的页面。（页面中使用框架才有用）target="_top" :以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）

关于IE6不支持CSS2中非a标签:hover事件的BUG

可用Jqurey弥补不足

$("要变的标签").hover(function() {

$(this).css("background-color","#eee");

},function(){

$(this).css('background-color','#fff');

});

border-bottom:2px solid #708089;不错的边框色

网页打开3秒后跳到百度

让IE8按ie7风格执行网页

firefox 页面缓存失效,在需要强制页面缓存失效的页面的Head节点中添加如

下语句：

*{filter:gray;color:gray}代码加入CSS将是网页内容变灰，不兼容FF

将下面代码加入之间将是Flash变灰

white-space:nowrap 标签

设置标签中文字内容不换行

word-wrap:break-word 标签

设置标签中文字内容将在边界内换行

text-overflow:clip | ellipsis 必须配合overflow:hidden 标签使用取值：

clip：不显示省略标记[...]而是简单的裁切.

ellipsis：当对象内文本溢出时显示省略标记[...],此值不能用于FF.

text-indent 标签

FIREFOX不识别

CSS for IE6,IE7,FF 兼容浅见

全部浏览器识别 height: 100px;

IE6 识别 _height: 100px;

IE7 识别 *+height: 100px;

IE6/IE7 识别 *height: 100px;

IE7/FF 识别 height: 100px !important;

兼容代码:兼容最推荐的模式。

/* FF */

.submitbutton {

float:left;

width: 40px;

height: 57px;

margin-top: 24px;

margin-right: 12px;

}

/* IE6 */

*html .submitbutton {

margin-top: 21px;

}

/* IE7 */

*+html .submitbutton {

margin-top: 21px;

}

一般兼容写法:

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE7/FF的兼容

代码:

一定要将width: 100px !important; /* IE7+FF */这句放置在另一句之上

2, IE6/IE77对FF * +html 与 * html 是IE特有的标签, FF 暂不支持.而 * +html 又为IE7特有标签.

代码:

sp: * +html 对IE7的兼容必须保证HTML顶部有如下声明：

浮动 float 闭合可以用这个解决多个div对齐间距问题

将代码加入全局CSS中,再给需要闭合的div加上class=”clearfix”

代码:

兼容小补贴

1, FF下可用 !important; 解决给 div 设置 padding 后导致的 width 和height 增加( IE不会).

2, 居中问题.

(1).水平居中.将 line-height 设置为当前 div 相同的高度.

(2).垂直居中. margin: 0 auto;[特别状态下失效]

3, 若需给 a或内联标签内的内容设置样式, 设置其 display: block属性; 4, FF 和 IE 对 BOX 理解的差异，导致设为 float的div在IE6下margin加倍等问题,解决方案是给div加上display:inline; .

例如：

css: .float{float:left;margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} [有多种途径]

5, 作为外部 wrapper[包装] 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

6, 手形光标. cursor: pointer. 而hand 只适用于 IE.

7, DIV浮动IE6/IE7 文本产生3象素的BUG

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

HTML_CODE:

CSS_CODE

.box{ float:left; width:800px;}

.left{ float:left; width:50%;}

.right{ width:50%;}

* html .left{ margin-right:-3px;}/*补满*/

----------------------------------------------------------------------------------------------

XHTML标签应用浅见

在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！在 CSS 定义中，a:hover 必须位于a:active之前，这样 a:active 才能生效！

1. meta 文件头声明

2. http-equiv=”refresh” 表示网页要重新下载显示

3. content=”time;URL” time 表示秒数，URL 网页显示内容

能让插入的元件透明，

letter-spacing : normal | length 设置文字之间的间隔

取值：

normal : 默认值。默认间隔

length : 由浮点数字和单位标识符组成的长度值，允许为负值

text-transform

取值：

none : 默认值。无转换发生

capitalize : 将每个单词的第一个字母转换成大写，其余无转换发生 uppercase : 转换成大写

lowercase : 转换成小写

white-space: nowrap

在元素中禁止文本折行

text-decoration: none

取值：

none : 默认值。无装饰

blink : 闪烁

underline : 下划线

line-through : 贯穿线

overline : 上划线

background-attachment:fixed 设置固定背景

取值：

scroll : 默认值。背景图像是随对象内容滚动

fixed : 背景图像固定

background-position : position || position 定位背景图像

取值：

百分数 | 由浮点数字和单位标识符组成的长度值。

float

取值：

none : 默认值。对象不飘浮

left : 文本流向对象的右边

right : 文本流向对象的左边

浮动对象的 display 属性将被忽略。

clear : none | left | right | both

取值：

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

Z-index :-1

能降低元素的优先级，例如在一段文本和图片重合时，将图片放在文本下面

元素可拥有负的 z-index 属性值。设置元素的堆叠顺序

Z-index 仅能在定位元素上奏效（例如 position:absolute;）

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

IE 7.0以下的区块会根据文本的长短改变区块的高度，IE 7.0和以上的文本会溢出区块框，需要定义

区块的高度来显示，（设置成AUTO会自适应文本长度）

overflow

取值：

visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效

auto : 在必需时对象内容才会被裁切或显示滚动条

hidden : 不显示超过对象尺寸的内容

scroll : 总是显示滚动条

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。

overflow: hidden 还能解决IE6区块高度问题

注意：IE6下默认的字体尺寸大致在 12 – 14px 之间，当你定义高度小于这个默认值的 div 的时候，该层的高度不会小于字体的行高。所以用 height:1px; 来定义了一个 div 的高度，在 IE 下显示

的仍然是一个 12 px 左右高度的层。

span包括文本不会换行

style="text-decoration:none" 定义没有下划线的超链接

提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

三种背景颜色设置方式,颜色是由红色、绿色、蓝色混合而成。

当所有颜色取相等的值时，灰色就可以被显示出来。

提示：如果你打算使用背景图片，你需要紧记一下几点：

背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。

背景图像是否与页面中的其他图象搭配良好。

背景图像是否与页面中的文字颜色搭配良好。

图像在页面中平铺后，看上去还可以吗？

对文字的注意力被背景图像喧宾夺主了吗？

[gray]色搭black是不错的搭配

应该使用 %20 来替换单词之间的空格

超链接中加 target 标签使页面在新窗口中打开

邮件格式

href="mailto:someone@https://www.wendangku.net/doc/bb11304109.html,?cc=someoneelse@https://www.wendangku.net/doc/bb11304109.html,&bcc=a ndsomeoneelse2@https://www.wendangku.net/doc/bb11304109.html,&subject=Summer%20Party&body=You%20are%20 invited%20to%20a%

20big%20summer%20party!">发送邮件！

%20表示单词中的空格

[ ?cc= ] 副本

[ &bcc= ] 密件副本

[ ?subject=] 主旨

[ &body= ] 内容

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在标签中加入：noresize="noresize"。

基本的注意事项 - 有用的提示：

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在标签中加入：noresize="noresize"。

为不支持框架的浏览器添加