61,124
社区成员
发帖
与我相关
我的任务
分享css做的滑动门在firefox和safari上出现排版问题，望指教
在firefox和safari上导航没有靠左，不知道问题出在哪，试了很久还没解决，请朋友门帮个望，先谢了,下面是代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Free CSS Navigation Menu Designs 2 at exploding-boy.com</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}
/*- Menu Tabs 3--------------------------- */
#tabs3 {
float:left;
width:100%;
background:#E4E6EB;
font-size:93%;
line-height:normal;
}
#tabs3 ul {
margin:0;
padding-top:10px;
padding-right:10px;
padding-bottom:0;
list-style:none;
}
#tabs3 li {
display:inline;
margin:0;
padding:0;
}
#tabs3 a {
float:left;
background:url("tableft3.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs3 a span {
float:left;
display:block;
background:url("tabright3.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs3 a span {float:none;}
/* End IE5-Mac hack */
#tabs3 a:hover span {
color:#FFF;
}
#tabs3 a:hover {
background-position:0% -42px;
}
#tabs3 a:hover span {
background-position:100% -42px;
}
#tabs3 #current a {
background-position:0% -42px;
}
#tabs3 #current a span {
background-position:100% -42px;
}
-->
</style>
</head>
<body>
<h2>Tab Menu 3</h2>
<div id="tabs3">
<ul>
<!-- CSS Tabs -->
<li><a href="test1"><span>test1</span></a></li>
<li><a href="test2"><span>test2</span></a></li>
<li id="current"><a href="test3"><span>test3</span></a></li>
<li><a href="test4"><span>test4</span></a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Free CSS Navigation Menu Designs 2 at exploding-boy.com</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}
/*- Menu Tabs 3--------------------------- */
#tabs3 {
float:left;
width:100%;
background:#E4E6EB;
font-size:93%;
line-height:normal;
}
#tabs3 ul {
margin:0;
padding-top:10px;
padding-right:10px;
padding-bottom:0;
list-style:none;
}
#tabs3 li {
display:inline;
margin:0;
padding:0;
}
#tabs3 a {
float:left;
background:url("tableft3.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs3 a span {
float:left;
display:block;
background:url("tabright3.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs3 a span {float:none;}
/* End IE5-Mac hack */
#tabs3 a:hover span {
color:#FFF;
}
#tabs3 a:hover {
background-position:0% -42px;
}
#tabs3 a:hover span {
background-position:100% -42px;
}
#tabs3 #current a {
background-position:0% -42px;
}
#tabs3 #current a span {
background-position:100% -42px;
}
-->
</style>
</head>
<body>
<h2>Tab Menu 3</h2>
<div id="tabs3">
<ul>
<!-- CSS Tabs -->
<li><a href="test1"><span>test1</span></a></li>
<li><a href="test2"><span>test2</span></a></li>
<li id="current"><a href="test3"><span>test3</span></a></li>
<li><a href="test4"><span>test4</span></a></li>
</ul>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
