云南龙网

  1. 首页 > 云知道 > >

IE和Firefox CSS多浏览器兼容性技巧大全推荐( 三 )

云知道


meta http-equiv="Content-Type" content="text/html;charset=gb2312" /
style type="text/css"
!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
--
/style

15.为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hiddenzoom:0.08line-height:1px
16.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明
param name=wmode value=https://www.rkxy.com.cn/dnjc/transparent /
17.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二

复制代码代码如下:
style type="text/css"
!--
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
--
/style

[page]
FF与IE
1. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中 。
2.链接(a标签)的边框与背景
a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行 。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格 。
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
Code:

复制代码代码如下:
style type="text/css"
!--
a:link {}
a:visited {}
a:hover {}
a:active {}
--
/style

4. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状，hand 仅 IE 可以
5.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.
7. BOX模型解释不一致问题
在FF和IE中的BOX模型解释不一致导致相差2px解决技巧：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反，important这个属性IE不能识别，但别的浏览器可以识别 。所以在IE下其实解释成这样：

复制代码代码如下:
div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;#box{ width:600px;//for ie6.0- width:500px;//for ff ie6.0}
#box{ width:600px!important //for ff width:600px;//for ff ie6.0 width /**/:500px;//for ie6.0-}

8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)

复制代码代码如下:
p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

9.最狠的手段 - !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 */}

推荐阅读


上一篇：抖音APP打开潜水艇游戏的方法步骤

下一篇：这人绝对不一般人是什么意思