Chrome背景图像问题

Question

我有三个div标签显示标题图像。

• 第一个div将左对齐徽标
• 第三个div将有右对齐的标志
• 中心的div应该重复一个空白的背景图像，以调整屏幕宽度。

我给中心div标签100%的宽度。它在IE中工作，而在Chrome中，中心标签扩展屏幕宽度。背景图像为第一个和最后一个div标签的长度扩展屏幕宽度。例如，如果第一个和最后一个图像是20%，我希望中心div调整为60%，但在Chrome中，它的第一个和最后一个是140% 20 + 20，中间标签是100%。

需要帮助!

Answer 1

我认为你的css是这里的问题。仔细看一下这个片段。工作很好。:)

.left {
  width: 9%;background-image:url("http://www.rachelgallen.com/images/skype.jpg");  background-repeat:no-repeat;background-position:top left;}
  .right {
    width: 9%;background-image:url("http://www.rachelgallen.com/images/email.jpg");  background-repeat:no-repeat; background-position:top right;}
    .middle {
      width: 80%;background-image:url("http://placehold.it/400x400"); background-repeat:repeat-x; height:150px; background-size:contain;}
      header {
        width: 100%;
        height: 150px;
        vertical-align: top;
        margin: 0!important, padding: 0!important;
      }
      .left,
      .right,
      .middle {
        display: inline-block;
        height: 150px;
      }

<header>
  <div class="left">&nbsp;</div>
  <div class="middle">&nbsp;</div>
  <div class="right">&nbsp;</div>
</header>