我会很感激任何可能的帮助,我已经反复浏览了这个网站,看看为什么这个导航不能正确定位。它影响网站的其余部分。我一直在尝试各种解决方案的所有论坛,但没有解决这个问题。我意识到css3不会显示,但我需要
它在 Chrome、FF、Safari、IE9 中是正确的,但在 IE8 中格式不正确。您可以在cluttercoach.com上查看该页面
CSS
@charset "UTF-8";
/* CSS Document */
body {
position: relative;
font-family: 'Lato', sans-serif;
background-color: #CCCCCC;
margin: 25px 0 25px 0;
color: #000;
background: url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center top;
}
ul, ol, dl {
position: relative;
padding: 0;
margin: 0;
}
sup,
sub {
position: relative;
font-size: 0.65em;
vertical-align: super;
line-height: 0;
}
a img {
position: relative;
border: none;
border-style: none;
}
h1, h2, h5, h6, h7, p {
position: relative;
margin: 0px;
padding: 5px 30px 10px 30px;
}
h10 {
position: relative;
margin: 0px;
padding: 0px 30px 0px 45px;
}
h3 {
position: relative;
margin: 0px;
padding: 0 10px 0 0;
}
h4 {
position: relative;
margin: 10px;
}
h5, h9 {
position: relative;
margin: 0px;
}
h11 {
position: relative;
margin: 0px;
padding: 5px 0 0 30px;
letter-spacing: 0.15em;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #FFF;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
a.black:link {
color: #000;
text-decoration: underline;
}
a.black:visited {
color: #000;
text-decoration: none;
}
a.black:hover, a.black:active, a.black:focus {
text-decoration: none;
}
a.purple:link {
color: #612D55;
text-decoration: underline;
}
a.purple:visited {
color: #612D55;
text-decoration: underline;
}
a.purple:hover, a.purple:active, a.purple:focus {
color: #612D55;
text-decoration: underline;
}
a img {border: none; }
.container {
position: relative;
z-index: -1;
width: 1000px;
margin: 0 auto;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
background: #FFF;
behavior: url(/PIE.htc);
}
.container_top {
position: relative;
width: 1000px;
}
.header {
position: relative;
width: 1000px;
height: 140px;
padding: 10px 0 0 0;
-webkit-border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
background-image: url('../images/base_elements/cc_header.jpg');
behavior: url(/PIE.htc);
}
.sidebar1 {
position: relative;
float: right;
width: 275px;
background-color: #FFFFFF;
border: none;
}
.content {
position: relative;
width: 700px;
float: left;
background-color: #FFF;
}
.content_testimonials {
position: relative;
padding: 15px 0px;
width: 950px;
float: left;
background-color: #FFF;
}
.content ul, .content ol {
position: relative;
padding: 15px;
}
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu {
height: 40px;
width: 1000px;
background: #612D55;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 25x;
}
/* Links */
.menu li a {
display: block;
padding: 0 26px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #999; }
/* Sub Menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #d1d1d1; /* Old browsers */
background: -moz-linear-gradient(top, #d1d1d1 0%, #adadad 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1d1d1), color-stop(100%,#adadad)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d1d1d1 0%,#adadad 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d1d1d1 0%,#adadad 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d1d1d1 0%,#adadad 100%); /* IE10+ */
background: linear-gradient(to bottom, #d1d1d1 0%,#adadad 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#adadad',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 185px;
padding: 4px 0 4px 25px;
margin: 0;
border: none;
}
.menu ul li:last-child a { border: none; }
.menu ul ul{
position: absolute;
top: 0;
left: 90%;
opacity: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu ul ul li a {
width: 250px;
padding: 4px 0 4px 25px;
margin: 0;
border: none;
}
.menu ul ul:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.menu ul ul:after { border-color: rgba(0, 0, 0, 0); border-right-color: #000; border-width: 8px; top: 20px; margin-top: -8px; }
ul.menu { z-index: 9999; position: relative; }
/* ~~ The footer ~~ */
.footer {
position: relative;
clear: both;
border-top: 4px solid #FC0;
-webkit-border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
background: #FFF;
behavior: url(/PIE.htc);
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#header_band {
position: relative;
height: 25px;
width: 1000px;
background-color: #FC0;
font-family: Lato, sans-serif;
}
body,td,th {
position: relative;
font-family: Lato, sans-serif;
}
h1 {
position: relative;
font-size: 30px;
color: #650065;
font-weight: normal;
}
.pods {
position: relative;
width: 215px;
padding-left: 15px;
margin: 10px;
padding: 10px auto;
border: 2px solid #660066;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
background: #FFF;
behavior: url(/PIE.htc);
}
#quotetext {
position: relative;
width: 215px;
padding-left: 15px;
margin: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 15px;
}
.jane_pod {
position: relative;
width: 215px;
height: 175px;
margin: 10px;
padding: 5px 15px 5px 15px;
border: 2px solid #660066;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
background: #FFF;
background-image: url('../images/promotions-kits/call_jane.jpg');
behavior: url(/PIE.htc);
.paragraph {
position: relative;
line-height: 1.25em;
color: #333;
}
.listing {
position: relative;
color: #333;
padding-top: -10px;
margin-top: -10px;
}
#site_map {
position: relative;
font-size: 10px;
font-weight: normal;
color: #666;
width: 975px;
margin: 10px auto 0 auto;
padding: 0 25px 0 25px;
}
h2 {
font-size: 16px;
color: #650065;
font-weight: normal;
}
h3 {
font-size: 18px;
color: #650065;
font-weight: bold;
}
h4 {
font-size: 16px;
color: #650065;
font-weight: normal;
}
h5 {
font-size: 20px;
color: #FFF;
font-weight: normal;
}
h6 {
font-size: 24px;
color: #FFF;
}
h7{
font-size: 14px;
color: #650065;
font-weight: normal;
line-height: 1.45em;
}
h8{
font-size: 18px;
color: #650065;
letter-spacing: 0.15em;
}
h9 {
font-size: 20px;
color: #FFF;
}
h11 {
font-size: 20px;
color: #612D55;
}
#services {
position: relative;
background-color: #CCC;
height: 110px;
width: 560px;
margin: 10px 0 0 100px;
border: 1px solid #888;
}
#services_text {
position: relative;
height: 80px;
width: 550px;
float: right;
padding: 10px 10px 5px 10px;
}
#tv_logos {
position: relative;
width: 175px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
padding: 0 20px 10px 20px;
}
#tv_logos_middle {
position: relative;
width: 175px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
padding: 10px 20px 10px 20px;
}
#tv_logos_bottom {
align: center;
position: relative;
width: 175 px;
padding: 10px 20px 10px 20px;
}
#started {
position: relative;
background-color: #660066;
height: 25px;
width: 125px;
margin: 10px 0 0 100px;
color: #FFF;
padding: 5px 0 5px 10px;
border: 2px solid #FFCC00;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
behavior: url(/PIE.htc);
}
#started_02 {
position: relative;
background-color: #660066;
height: 25px;
width: 125px;
margin: 10px 0 0 30px;
color: #FFF;
padding: 5px 0 5px 10px;
border: 2px solid #FFCC00;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
behavior: url(/PIE.htc);
}
#started_03 {
position: relative;
background-color: #660066;
height: 25px;
width: 125px;
margin: 10px 0 0 100px;
color: #FFF;
padding: 5px 0 5px 10px;
border: 2px solid #FFCC00;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
behavior: url(/PIE.htc);
}
#started_text {
position: relative;
background-color: #FFF;
height: 25px;
width: 625px;
margin: 10px 0 0 85px;
color: #888;
}
#services_list {
position: relative;
background-color: #FFF;
width: 585px;
margin: 10px 0 0 30px;
border: 1px solid #FFCC00;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
behavior: url(/PIE.htc);
}
#services_text_list {
position: relative;
width: 560px;
padding: 5px 15px 0 15px;
}
#services_list_test {
position: relative;
background-color: #FFF;
width: 850px;
margin: 0 0 0 30px;
padding: 0px;
border: 1px solid #FFCC00;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: #666 0px 2px 4px;
-moz-box-shadow: #666 0px 2px 4px;
box-shadow: #666 0px 2px 4px;
behavior: url(/PIE.htc);
}
#services_text_list_test {
position: relative;
width: 840px;
padding: 5px;
}
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>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Cluttercoach</title>
<meta name="keywords" content="Chicagoland, Chicago, professional organizer, organizing, Jane Carroo, Clutter Coach, storage, life coach, memorabilia, inventory, time management, National Association of Professional Organizers, organization, downsize, disorganized, filing system, relocate, home staging">
<meta name="verify-v1" content="GjwxC8bQTgNcbTb2zk18Ok0B3bo0baxJqpWUqJbSNiM=" />
<meta name="ROBOTS" content="index,follow">
<meta name="REVISIT-AFTER" content="15 days">
<meta name="google-site-verification" content="-QkbNOxxz2Za-cfdX2RFGvdPbAW0H2n6L-cfOTpXyDs" />
<style type="text/css">
<script type="text/javascript" src="js/jquery.js">
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1091736-1";
urchinTracker();
</script>
</head>
<body>
<div class="container"><!-- #BeginLibraryItem "/Library/header.lbi" --> <div class="header">
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post">
<div align="right">
<input type="hidden" name="m" value="1101831114185">
<input type="hidden" name="p" value="oi">
</div>
<div id="signup_input" class="bold_white">
<div align="right"><br />
<h5>Sign up for great organizing tips!<br />
<input type="text" name="ea" size="12" value=""><input type="submit" name="go" value="Go" class="submit" style="margin-right:10px;" />
<br />
Call Now! 847-776-8717
</div>
</div>
</form>
</div><!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/tag_line.lbi" --><div id="header_band"><h11>PROFESSIONAL ORGANIZING SERVICES</h11></div><!-- #EndLibraryItem --><div id="nav"><!-- #BeginLibraryItem "/Library/navigation.lbi" --><ul class="menu">
<li><a href="index.shtml">Home</a></li>
<li><a href="about.shtml">About Us</a>
<ul>
<li><a href="my_story.shtml">My Story</a></li>
<li><a href="affiliations.shtml">Affiliations</a></li>
<li><a href="news.shtml">In the News</a></li>
</ul>
</li>
<li><a href="services.shtml">Services</a>
<ul>
<li><a href="home.shtml">Home Organizing</a>
<ul>
<li><a href="closets.shtml">Closet Design & Organization</a></li>
<li><a href="memorabilia.shtml">Photos & Memorabilia</a></li>
<li><a href="http://www.simplesizing.com/index.html" target="_blank">Simplesizing</a></li>
</ul>
</li>
<li><a href="office.shtml">Office Organizing</a></li>
<li><a href="relocation.shtml">Move Management</a>
<ul>
<li><a href="moving_packages.html">Moving Packages</a></li>
</ul>
</li>
<li><a href="seniors.shtml">Senior Moves</a></li>
<li><a href="business.shtml">Business Organizing</a></li>
<li><a href="coaching.shtml">Coaching</a></li>
<li><a href="education.shtml">Speaking</a></li>
</ul>
</li>
<li><a href="photos.shtml">Photo Gallery</a>
<ul>
<li><a href="b4aft_home.shtml">Home Transformations</a></li>
<li><a href="b4aft_office.shtml">Office Transformations</a></li>
<li><a href="photos_earlyshow.shtml">CBS Early Show</a></li>
</ul>
</li>
<li><a href="testimonials.shtml">Testimonials</a></li>
<li><a href="resources.shtml">Resources</a>
<ul>
<li><a href="products.shtml">Organizing Products</a></li>
<li><a href="helpful_tips.html">Helpful Tips</a></li>
<li><a href="articles.shtml">How-to Articles</a></li>
<li><a href="recycling.shtml">Recycle Your Clutter</a></li>
<li><a href="donations.shtml">Donation Places</a></li>
</ul>
</li>
<li><a href="http://www.cluttercoach.com/blog/">Blog</a></li>
<li><a href="contact.shtml">Contact Us</a></li>
</ul><!-- #EndLibraryItem --></div>
<div class="sidebar1"><!-- #BeginLibraryItem "/Library/social_media.lbi" -->
<h2 align="left"><img src="images/social_media/cc_social_media.png" alt="social media" style="border-style: none" width="250" height="100 usemap=" usemap="#MapMap"#Map"/>
<map name="MapMap" id="MapMap">
<area shape="rect" coords="172,9,245,95" href="http://www.angieslist.com/companylist/us/il/rolling-meadows/clutter-coach-company-reviews-2284946.htm" alt="Angie's List Super Service Award winner" title="Angie's List Super Service Award winner" />
<area shape="rect" coords="138,49,164,74" href="http://pinterest.com/cluttercoach/" target="_blank" />
<area shape="rect" coords="111,48,137,76" href="#https://plus.google.com/107131551359650759460" target="_blank" />
<area shape="rect" coords="82,47,110,77" href="#http://www.youtube.com/user/ClutterCoachCo?feature=watch" target="_blank" />
<area shape="rect" coords="55,48,79,75" href="http://www.linkedin.com/in/cluttercoach" target="_blank">
<area shape="rect" coords="28,47,52,75" href="https://twitter.com/cluttercoach" target="_blank">
<area shape="rect" coords="0,48,24,75" href="http://www.facebook.com/pages/Clutter-Coach/111735661075?ref=nf" target="_blank">
</map></h2><!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/call_jane.lbi" -->
<div class="jane_pod"></div>
<!-- #EndLibraryItem -->
<div class="pods">
<div id="tv_logos">
<div align="center"><img src="images/as_seen_on/nbc.png" width="150" height="62" alt="nbc" /></div>
</div>
<div id="tv_logos_middle">
<div align="center"><img src="images/as_seen_on/cbs.png" width="150" height="34" alt="CBS" /></div>
</div>
<div id="tv_logos_middle">
<div align="center"><img src="images/as_seen_on/hoarders.png" width="150" height="25" alt="Hoarders" /></div>
</div>
<div id="tv_logos_middle">
<div align="center"><img src="images/as_seen_on/chicago_tribune.png" width="147" height="28" alt="Chicago Tribune" /></div>
</div>
<div id="tv_logos_middle">
<div align="center"><img src="images/as_seen_on/daily_herlald.png" width="150" height="29" alt="Daily Herald" /></div>
</div>
<div id="tv_logos_bottom">
<div align="center"><img src="images/as_seen_on/whitney.png" width="150" height="62" alt="nbc" /></div>
</div>
</div>
<div class="pods">
<h4>Jane and her team did a terrific job of triage: organizing, hand-holding and packing for our big downsizing move. Although we were just moving within Chicago, things were so well wrapped and labeled I think we could have shipped the boxes to anywhere in Europe and found everything perfectly intact. With her assistance, we were able to feel comfortable with everything.<br />
<br /><em>Claire<br />
Chicago, Ill</em></h4>
</div>
</div>
<div class="content"></div>...