0

我还在学习 HTML5，所以我知道我需要 shim，所以它就在那里，我已经在许多不同的平台和浏览器上测试了我的网站，包括 windows 和 mac，这似乎是唯一阻止我启动我的site 是 IE 中的页脚脚本。我有垫片，所以不应该工作吗？

当我告诉它时，它并没有跨越 100%。它在除 IE 之外的所有浏览器中都能正常工作。它也没有跨越移动设备。这两者都是由于缺少一段代码造成的吗？

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 中的样子 在此处输入图像描述

我敢打赌，我缺少的只有一件事可以解决这个问题，嗯？一如既往地感谢任何建议和帮助。谢谢！

4

2 回答 2

2

您</div>在幻灯片后缺少两个标签，一个结束 .slides_container一个结束slides. 那里已经有两个了，应该结束example和slide-container。

不匹配的标签是布局问题的第一大原因。这就是我使用 Notepad++ 的原因，因为它会突出显示匹配的标签 - 使用它我立即看到某些元素没有被关闭，因为缺少</div>标签。

于 2012-05-14T00:03:00.597 回答
0

您的页脚设置为 100% 宽度。我会说它可能正在这样做。问题是 100% 是什么。

它只会和它的容器一样大。用 ie 调试器看一下页面，看看父元素有多大。当您发现它与页脚大小相同时，下一个问题就是为什么。

于 2012-05-13T23:52:44.850 回答