书签分享收藏举报版权申诉 / 10

立即下载加入VIP,免费下载

当前位置：首页 > 法律文书 > 调解书 > CSSforIE6IE7FF兼容基本方案.docx

CSSforIE6IE7FF兼容基本方案.docx

文档编号：7980934
上传时间：2023-01-27
格式：DOCX
页数：10
大小：23.56KB

《CSSforIE6IE7FF兼容基本方案.docx》由会员分享，可在线阅读，更多相关《CSSforIE6IE7FF兼容基本方案.docx（10页珍藏版）》请在冰豆网上搜索。

CSSforIE6IE7FF兼容基本方案.docx

CSSforIE6IE7FF兼容基本方案

CSSforIE6,IE7,FF兼容基本方案

滤镜效果IE和FF方法。

filter:

alpha（opacity=50）;

-moz-opacity:

0.5;

opacity:

0.5;

检测表单中Radio元素

functionradio_value（name）{

varobj=document.getElementsByName（name）;

　　for（i=0;i

　　{

　　if（obj[i].checked）

　returnobj[i].value;

　　}

选择卡JS控制代码

functionsetTab（name,cursel,n）{

for（i=1;i<=n;i++）{

varmenu=document.getElementById（name+i）;

varcon=document.getElementById（"con_"+name+"_"+i）;

menu.className=i==cursel?

"now":

"";

con.style.display=i==cursel?

"block":

"none";

}

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

去除abutton标签点击时的虚线

方法1（批量处理）:

CSS样式：

a{blr:

expression（this.onFocus=this.blur（））}

方法2（单个处理）:

去掉链接上的虚线框可以在链接里面加入onfocus="this.blur（）;"就可以去掉虚线框了

方法3（批量处理）:

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

COMPONENT>

METHOD NAME="Click" />

ATTACH EVENT="onfocus" ONEVENT="Click（）" />

function Click（）

{

element.blur（）;

}

COMPONENT>

再在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:

1pxsolid#708089;不错的边框色

网页打开3秒后跳到XX

让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不识别

CSSforIE6,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顶部有如下声明：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"　"http:

//www.w3.org/TR/html4/loose.dtd">

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

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

代码:

兼容小补贴

1,FF下可用!

important;解决给div设置padding后导致的width和height增加（IE不会）.

2,居中问题.

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

（2）.垂直居中.margin:

0auto;[特别状态下失效]

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属性来控制这些框的堆放次序。

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

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

overflow

取值：

visible :

　默认值。

不剪切内容也不添加滚动条。

假如显式声明此默认值，对象将以包含对象的window或frame的尺寸裁切。

并且clip属性设置将失效

auto :

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

hidden :

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

scroll :

　总是显示滚动条

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

overflow:

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

注意：

IE6下默认的字体尺寸大致在12–14px之间，当你定义高度小于这个默认值的div的时候，该层的高度不会小于字体的行高。

所以用height:

1px;来定义了一个div的高度，在IE下显示

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

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标签使页面在新窗口中打开

邮件格式

someone@?

cc=someoneelse@&bcc=andsomeoneelse2@&subject=Summer%20Party&body=You%20are%20invited%20to%20a%

20big%20summer%20party!

">发送邮件！

%20表示单词中的空格

cc=]副本

[&bcc=]密件副本

subject=]主旨

[&body=]内容

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。

为了避免这种情况发生，可以在标签中加入：

noresize="noresize"。

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

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。

为了避免这种情况发生，可以在标签中加入：

noresize="noresize"。

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