0

私はまだ HTML5 を学んでいるので、そこに shim が必要であることを理解しているので、そこにあり、Windows と Mac の両方で、多くの異なるプラットフォームとブラウザーで自分のサイトをテストしましたが、私の起動を妨げている唯一のもののようですsite は IE のフッター スクリプトです。私はシムを持っているので、うまくいきませんか？

私が言っているとき、それは100％にまたがっていません。IE を除くすべてのブラウザで美しく動作します。また、モバイル デバイスにもまたがっていません。これらはどちらも、コードのスニペットが 1 つ不足していることが原因ですか?

HTML

<footer>
<ul class="footer-widgets">
<li class="widget3"><h6>Testimonials</h6>
<p>When I first came to Amber about creating a website for my business I wasn't sure what to expect. After working with her I've found that the whole experience is easy and a lot less expensive then I was previously quoted by another company. She described each step that was required for my projects and worked hard to bring my vision to life.</p>

<p>Amber Goodwin is a very creative &amp; passionate individual with an appetite for design, I would recommend her for any and all your business branding needs!</p>
<a href="http://www.nuggetcity.com">WWW.NUGGETCITY.COM</a>
</li>

<li class="widget4"><h6>Contact</h6>
<p class="footer-title">Are you looking for a new website?</br>Need to update your existing one?</br>Or just need some information?</p>
<img src="img/title-footer-call.jpg" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="-1,0,114,39" href="mailto:info@ambergoodwin.com" target="_blank">
</map>

</ul>

<div id="footer-bottom">
<p>&copy; 2012 AMBER GOODWIN | Creative &amp; Fresh Designs</p>
</div>
</footer>

CSS

footer { width: 100%; height: 500px; background: url(img/BG-footer.jpg) repeat-x; background-color: #211e1b; clear: both; color: #b1b1b1; }

.footer-widgets { width: 905px; margin: 0 auto; padding: 0px; padding-top: 70px; }
.footer-widgets p { width: 94%; }
.footer-widgets a { text-decoration: underline; color: #f8d54b; }
.footer-widgets a:hover { text-decoration: none; color: #f8d54b; }
.footer-widgets li { height: auto; list-style-image: none; list-style-type: none; float: left; color: #b1b1b1;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
.footer-widgets li h2 { font-size: 1.4em; font-weight: normal; letter-spacing: 1px; line-height: 30px; text-align: left; }

.widget1 { width: 289px; }
.widget2 { width: 608px; }
.widget3 { width: 580px; }
.widget4 { width: 316px; }
.widget4 p { width: 100%; }


#footer-bottom { width: 100%; height: 50px; padding-bottom: 20px; background-color: #1a1715; border-top: 2px solid #272322; color: #fff; display: block; margin-top: 400px; }
#footer-bottom p { width: 600px; margin-left: 370px; height: 30px; font-size: 1em; line-height: 25px; color: #eee; margin-top: 20px; /*margin-top: 60px;*/ position: absolute;left: 50%; margin-left: -450px;}

ヘッドセクション

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Amber Goodwin | Graphic & Web Designer based in the Okanagan Valley </title>
  <meta name="description" content="">
  <meta name="author" content="Amber Goodwin">

  <meta name="viewport" content="width=device-width,initial-scale=1">


  <link rel="stylesheet" href="style.css">
  <link href="lightbox.css" rel="stylesheet">

  <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

作業現場はこちらからご覧いただけます。

IEで見るとこんな感じ ここに画像の説明を入力

これを修正するために欠けているものが1つだけあると思いますか？いつもありがとうございます。ありがとう！

4

2 に答える 2

2

</div>スライドの後に2 つのタグがありません。1つは を終了するタグ、もう 1slides_containerつは を終了するタグslidesです。そこにはすでに 2 つあり、これで と が終了するはずexampleですslide-container。

タグの不一致は、レイアウトの問題の最大の原因です。一致するタグが強調表示されるため、メモ帳++を使用するのはそのためです。これを使用すると、タグがないために一部の要素が閉じられていないことがすぐに</div>わかりました。

于 2012-05-14T00:03:00.597 に答える
0

フッターの幅は 100% に設定されています。おそらくそうしていると言えます。質問は100％何ですか。

コンテナと同じくらいの大きさになります。ie デバッガーでページを見て、親要素の大きさを確認してください。フッターと同じサイズであることがわかったら、次の質問はその理由です。

于 2012-05-13T23:52:44.850 に答える