61,126
社区成员
发帖
与我相关
我的任务
分享IE6.0 和 firefox 兼容问题：下面是我设计的一个页签显示的例子，在IE6.0下达到了预期的目的，显示满意，但是在FIREFOX下显示不理想，请高手指点一下
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>User Setting</title>
<script language="javascript">
</script>
<style type="text/css">
body {
margin:100px;
padding:10px;
}
#beautytab
{//*设定项目列表Ul元素的属性，其中background用来设定连贯于各个列表项目下的横线，否则它们会彼此分离，用了一张事先准备好的图片，让它放置在底部，水平重复*//
position:absolute;
top:75px;
left:100px;
height: 0px;
margin: 0;
padding:0;
padding-left: 0px;
}
#beautytab a:link, #beautytab a:visited
{//*设定标签卡中超链接的文字的属性*//
float: left;
font-size: 9pt;
line-height: 25px;
/*font-weight: bold;*/
font-weight: 600;
padding: 2px 10px 2px 10px;
/*text-align:center;*/
margin-right: 0px; //各个标签的间隔为0；
border: 1px solid #ccc;
font-family:Arial;
text-decoration: none;
color: #37709b;
background: url('01.gif');
}
#beautytab a:hover
{//*设定超链接鼠标浮动效果*//
/*background: #fff;*/
font-size: 9pt;
line-height: 25px;
color: #000;
font-family:Arial;
background: url('02.gif');
}
#beautytab a:active
{//*设定超链接鼠标浮动效果*//
/*background: #fff;*/
font-size: 9pt;
line-height: 25px;
color: #000;
font-family:Arial;
background: url('02.gif');
}
#biankuang{
position:absolute;
top:103px;
width:700px;
height:300px;
left:100px;
background-color:#ffff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#xiaokuang{
position:absolute;
top:76px;
width:220px;
height:28px;
left:578px;
background-color:#ffff;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
}
</style>
</head>
<body >
<div id="beautytab">
<a href="#">Console</a>
<a href="#">Printer1</a>
<a href="#">Printer2</a>
<a href="#">Printer3</a>
<a href="#">Printer4</a>
<a href="#">IP</a>
<a href="#">Load/Save</a>
</div>
<div id="biankuang"></div>
<div id="xiaokuang"></div>
<FORM >
</FORM>
</body>
</HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>User Setting</title>
<script language="javascript">
</script>
<style type="text/css">
body {
margin:100px;
padding:10px;
}
#beautytab
{//*设定项目列表Ul元素的属性，其中background用来设定连贯于各个列表项目下的横线，否则它们会彼此分离，用了一张事先准备好的图片，让它放置在底部，水平重复*//
position:absolute;
top:75px;
left:100px;
height: 0px;
margin: 0;
padding:0;
padding-left: 0px;
}
#beautytab a:link, #beautytab a:visited
{//*设定标签卡中超链接的文字的属性*//
float: left;
font-size: 9pt;
line-height: 25px;
/*font-weight: bold;*/
font-weight: 600;
padding: 2px 10px 2px 10px;
/*text-align:center;*/
margin-right: 0px; //各个标签的间隔为0；
border: 1px solid #ccc;
font-family:Arial;
text-decoration: none;
color: #37709b;
background: url('01.gif');
}
#beautytab a:hover
{//*设定超链接鼠标浮动效果*//
/*background: #fff;*/
font-size: 9pt;
line-height: 25px;
color: #000;
font-family:Arial;
background: url('02.gif');
}
#beautytab a:active
{//*设定超链接鼠标浮动效果*//
/*background: #fff;*/
font-size: 9pt;
line-height: 25px;
color: #000;
font-family:Arial;
background: url('02.gif');
}
#biankuang{
position:absolute;
top:103px;
width:700px;
height:300px;
left:100px;
background-color:#ffff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#xiaokuang{
position:absolute;
top:76px;
width:220px;
height:28px;
left:578px;
background-color:#ffff;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
}
</style>
</head>
<body >
<div id="beautytab">
<a href="#">Console</a>
<a href="#">Printer1</a>
<a href="#">Printer2</a>
<a href="#">Printer3</a>
<a href="#">Printer4</a>
<a href="#">IP</a>
<a href="#">Load/Save</a>
</div>
<div id="biankuang"></div>
<div id="xiaokuang"></div>
<FORM >
</FORM>
</body>
</HTML>
...全文
请发表友善的回复…
发表回复
balibell 2007-11-02
- 打赏
- 举报
怎么不满意要描述啊，你给的背景图片我们也没办法加载。
liveforever_1981 2007-10-31
- 打赏
- 举报
贴代码 用插入源代码 太恐怖了
无数转义字符 不知怎么复制消
无数转义字符 不知怎么复制消
gx66551317 2007-10-31
- 打赏
- 举报
路过，帮你顶一下哈！
