1
私は答えを見回しましたが、私のコードに何か不足があるかどうかわかりません。もしあなたが私を案内したり、助けてくれたら、私はそれを感謝します。 IE 8と7を CSSスプライト - IE 8と7で表示されない
は@ djlumleyの要求
<body>
<div id="wrapper">
<header>
<div class="container">
<h1 id="logo" class="float-left text-left"><a href="/"><img src="img/logo.png" alt="Company Name"/></a></h1>
<nav id="menu">
<ul>
<li class="home"><a href="/"><span>Home</span></a></li>
<li class="events"><a href="#"><span>Diary of Events</span></a></li>
</ul>
</nav>
</div>
</header>
<div id="slider">
<div class="container">
<div class="camera_wrap camera_azure_skin slidereel" id="camera_wrap_1">
<div data-thumb="img/slides/thumbs/1.jpg" data-src="img/slides/1.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-thumb="img/slides/thumbs/2.jpg" data-src="img/slides/2.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-thumb="img/slides/thumbs/3.jpg" data-src="img/slides/3.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
</div>
</div><!--end .container-->
</div><!--end #slider-->
<article>
<div class="container">
<h2>Examples</h2>
<p>Incorporating</p>
<div id="corp_container">
<ul>
<li><img src="img/logo_comm.png" alt=""/></li>
<li><img src="img/logo_ent.png" alt=""/></li>
<li><img src="img/logo_bro.png" alt=""/></li>
</ul>
</div>
</div>
</article>
<footer>
<div class="container">
<div id="keypartners" class="float-left">
<p>Key Partners</p>
<ul>
<li>
<img src="img/pics_37.jpg" alt=""/>
</li>
<li>
<img src="img/pics_39.jpg" alt=""/>
</li>
</ul>
</div>
<div id="hostedby" class="float-left">
<p>Hosted by</p>
<ul>
<li>
<img src="img/pics_41.jpg" alt=""/>
</li>
<li>
<img src="img/pics_43.jpg" alt=""/>
</li>
</ul>
</div>
<div id="footernav" class="float-right text-right">
<ul>
<li>Disclaimer</li>
<li>Privacy Policy</li>
<li>Home</li>
<li>Diary of Events</li>
</ul>
<div id="copyright">
<p>Copyright © 2012</p>
<p><strong>Last Updated on</strong> 1 March 2012</p>
</div>
</div>
</div>
</footer>
</div><!--#wrapper-->
</body>
#wrapper{ width:100%;}
header{background:#fff url(../img/logo_bg.jpg) no-repeat; height:87px; width:100%;display:block;}
header h1#logo{height:20px; margin-top:-10px; width:201px;}
#menu {float:right;margin-top:35px;width:300px;height:52px; display:block;}
#menu span{display:none;}
#menu li, header #menu a{height:52px;display:block;}
#menu li{float:left; list-style:none;}
#menu .home a{width:96px;}
#menu .events a{width:164px;}
#menu .home a{background:transparent url(../img/navs.png) no-repeat 0px 0px;}
#menu .events a{background:transparent url(../img/navs.png) no-repeat -96px 0px;}
#menu .home a:hover{background:transparent url(../img/navs.png) no-repeat -0px -53px;}
#menu .events a:hover{background:transparent url(../img/navs.png) no-repeat -96px -53px ;}
#event_header{background:#2dacf1;margin: 0 0 10px 0;padding: 5px 0; width:100%;}
#slider{
height:400px;
/* fallback */ background-color: #33b5f3;
background-image: url(../img/banner_slider_bg.jpg);
background-position: center center;
background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#33b5f3), to(#4dd6f8));
/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #33b5f3, #4dd6f8);
/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #33b5f3, #4dd6f8);
/* IE 10 */ background: -ms-radial-gradient(circle, #33b5f3, #4dd6f8); /* Opera cannot do radial gradients yet */ }
}
article{width:100%;}
article h2{ padding:5px 0;}
article p{margin: 30px 0 20px 40px;}
#corp_container{background:#fff url(../img/incorporate.png) no-repeat;height:70px; margin:30px 0 80px 0; width:960px;}
#corp_container ul{list-style:none;}
#corp_container ul li{display:inline;padding: 30px 20px 8px 0;}
#corp_container ul li img {margin-top:-10px;}
footer{width:100%; background:#f4f4f4; overflow:hidden; padding:20px 0 40px 0;}
#keypartners, footer #hostedby{padding:0 40px 0 0;}
#keypartners ul,footer #hostedby ul,footer #footernav ul{list-style:none;margin:0;padding:0;}
#keypartners ul li,footer #hostedby ul li{padding: 5px 40px 0 0;}
#keypartners ul li,footer #hostedby ul li,footer #footernav ul li{display:inline;}
#footernav ul li{border:none; height:auto;padding:5px 10px 0 10px; text-align:center;}
#footernav li + li {border-left: 1px solid #000;}
#footernav li:last-child {padding-right:0;}
#copyright{margin:20px 0 10px 0;}
#copyright p{padding:0;margin:0;line-height:1.5em;}
table,td,tr,th{
margin:0;
padding:0;
font-weight:normal;
}
table{font-size:0.8em; margin-bottom:15px; width:100%;}
table td,table th{padding:5px; border:1px solid #fff; border-width:0 1px 1px 0;}
thead th{background:#91c5d4;font-weight:bold; }
thead th[colspan], thead th[rowspan]{background:#66a9bd;}
tbody th {background:#91c5d4;font-weight:bold; text-align:left;}
tbody td{background:#d5eaf0;text-align:center;}
.pink{background:#ffb1b4;}
.red{background:#ff6b71;}
.yellow{background:#fcffa2;}
.purple{background:#f1ddf9;}
.orange{background:#ffc560;}
IE 9当たりに編集し、FFは大丈夫ナビゲーションを表示ではなく、なぜですか？あなたがspan秒間display:noneを与え、aのための幅を定義していなかったので、
あなたの 'url'宣言の内容を引用符で囲んだ場合、変更はありますか？ 'url（ '../ img/_navs。png '） ' – SenorAmor
@SenorAmor - 何も変更しません – joe
これを除いて、ヘッダをすべてのセレクタに入れることは意味がなく、セレクタの一致を遅くします。 – steveax