2012-12-13 175 views
1

我有一个很好的问题在CSS设计,我无法弄清楚如何解决它。div标签的CSS背景颜色没有填充所有轴

而正是在这个论坛上同样的问题: enter image description here

我观察到,标题背景不完全填充它的水平范围时,它在放大以下是该网站的缩小视图。

enter image description here

这个设计我的页眉和页脚的背景时非常有我的情况一样。 enter image description here

我的HTML代码为:

<div id="footerBack"> 
     <div id="footer"> 
      <a href="#"><img src="images/eyecolor.png" alt="Eyecolor Icon" /></a> 
      <ul> 
       <li><a href="#" id="terms">Terms &amp; Service</a></li> 
       <li><a href="#" id="privacy">Privacy Policy</a></li> 
       <li><a href="#" id="news">News</a></li> 
       <li><a href="#" id="footerAbout">About</a></li> 
       <li><a href="#" id="footerContact">Footer</a></li> 
      </ul> 
      <p id="copyright">Copyright &copy; 2012 Jed Designs</p> 
      <a href="#"><p id="email">Email: [email protected]</p></a> 
     </div> 
    <div id 

我的CSS:

/*Footer*/ 
#footerBack   {background: url(images/footerBack.jpg) repeat-x; height: 48px; position: relative; top: -4px;}; 
#footer    {padding-top: 10px;} 
#footer ul, #footer img 
      {margin-top: 5px;} 
#footer ul   {float: left; margin-left:160px; margin-top: 15px;} 
#footer li a  {color: #d6b85e; padding: 7px; margin: 0 8px 0 8px; font: 11px Tahoma, Geneva, sans-serif;} 
#footer li a:hover {background:#d6b85e; color: #73401f;} 
#footer img   {float: left;} 
#footer #copyright, #footer #email  
      {float: right; color: #e5dca9; font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif; margin-right: 12px;} 
#footer #email  {margin-top: 2px;} 
#footer #copyright {margin-right: 20px; margin-top: 12px;} 

会有什么做些什么来解决这个设计问题? :D

+1

除了强制宽度超过100%之外,确实没有太多的工作可做。现在发生的事情是页面呈现的是页眉的宽度,因为从技术上来说,文档的大小并没有改变,只是它的放大率,CSS表示文档仍然是x宽,即使它比屏幕上的宽度大得多。将页脚的宽度设置为5000px,然后放大,不会出现缩小问题,问题是您现在无任何理由会有水平滚动条。 –

+0

我看..谢谢:) – Jed

回答

0

我无法在IE9中的stackoverflow上重现该问题。我也没有看到在你提供的代码片段中会发生任何理由(尽管可能有其他的东西)。

这可能是您的计算机的问题。你有没有另一台电脑可以试用,只是为了消除这个问题?