Question

我正在学习如何创建一个现有的网站，响应和看似简单的东西，让我绝对疯狂。
当我应用max-width-480px样式表时，它会切断约5 px的左边缘。你可以说它丢失了，因为我在css中添加的圆角在左边突然切断，但在右边是漂亮而平滑的。我花了几个小时试图调整包装器和mainwrapper css，似乎没有什么能解决它。有任何想法吗？

注意：topwrapper的图像是带有圆角的设置宽度白色背景。由于设置大小的图形不会响应，我已经删除了较小的屏幕，只是将border-radius添加到mainwrapper div。

注意2：我试图添加一张图片来向您展示问题，但由于我是一张新海报，我无法做到。该网站是：www.develdesign.com/WaterWorks请务必在智能手机上查看该问题。谢谢。

html中包装相关div的片段

    <body>
  <div id="wrapper">
    <div id="topwrapper"></div>
    <div id="mainwrapper">
      <!-- Header Start -->
      <div id="header">
        <div class="center">
          <!-- Logo Start -->
          <div id="logo"><a href="<?e(_WWW_)?>index.php"><img src="images/wworks/wwlogo239px.png" alt="logo" /></a></div>
          <!-- Logo End -->

          <div id="headerright">
            <!-- Menu Navigation Start -->

                                <? require('top-navigation.php'); ?>

            <!-- Menu Navigation End -->
          </div><!-- end headerright -->
        </div><!-- end center -->
      </div><!-- end header -->

常规桌面样式（无响应的CSS）

#wrapper {  
  width: 100%;
  max-width: 976px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}


#topwrapper {
  height: 19px;
  width: 100%;
  max-width: 976px;
  background: url(../images/topwrapper.png) no-repeat;
}
#mainwrapper {
    width:100%;
  max-width: 976px;
  background: url(../images/mainwrapper.png) repeat-y;
}
#bottomwrapper {
  margin: 0 auto;
  height: 55px;
  width: 100%;
  max-width: 976px;
  background: url(../images/bottomwrapper.png) no-repeat;
}
.center {
  margin: 0 auto;
  width: 900px;
}

/* ----------------------- HEADER -----------------------*/
#header {
  width: 960px;
  height: 50px;
  padding-bottom: 39px;
  background: url(../images/bgheader.jpg) bottom center repeat-x;
  margin: 0 auto;
}
#headerright {
  padding-top: 20px;
  width: 670px;
  float: right;
    position: relative;
}
#logo {
  margin-top: 15px;
  float: left;
  width: 220px;
}

响应max-width-480px

#wrapper {
    width: 100%;
    }

#topwrapper {
    display:none;
    }

#mainwrapper {    /*white background for all header and maincontent */
    border-radius: 5px 5px 25px 25px;
} 

#bottomwrapper {
  display: none;  
}


.maincontent {
    width: 60%;
    float: left;
}



<!-- HEADER -->
#header {
  /*width: 50%;*/
  /*height: 50%;*/
  /*background-image: none;*/
}

.center {
    width: 95%;
}

#headerright{  /* includes phone numbers and full site navmenu */
    display:none; 
}

#logo {
    width: 100%;
}

Answer 1

不能肯定地说，但是经过一番快速的观察后，是不是有可能在某处将填充物敲掉。如果是这样，请确保在css中设置box-sizing属性。链接： Box Sizing

同时检查元素之间是否有空格，这也会影响显示：内联块，使得两个50％宽度的div不会彼此相邻。您可以将行高设置为0或注释掉空格。

Answer 2

我终于明白了！ mainwrapper有一个背景图像，也是一个设置宽度的图像（像topwrapper）。一旦我意识到主包装器的背景图像仅重复y，我将其移除并用背景颜色替换为白色，它看起来很棒。

  #mainwrapper {
  width:100%;
  max-width: 976px;
  background: url(../images/mainwrapper.png) repeat-y;
}

在智能手机上查看响应式网站时，左侧像素被切断

2 个答案: