在智能手機上查看響應站點時，左像素被切掉

Question

我正在學習如何使現有網站具有響應能力，而且看起來如此簡單，這簡直讓我發瘋。
當我應用max-width-480px樣式表時，它切斷了我左邊緣的大約5 px。 您可以說它丟失了，因為我在css中添加的圓角在左側突然被切掉，但在右側則變得平滑流暢。 我花了幾個小時嘗試調整包裝器和主包裝器CSS，但似乎沒有任何解決辦法。 有任何想法嗎？

注意：topwrapper的圖像是帶有圓角的固定寬度的白色背景。 由於設置大小的圖形將不響應，因此我已將其刪除以用於較小的屏幕，而只是將邊框半徑添加到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屬性。 鏈接：盒裝

還要檢查元素之間是否沒有空格，這也會影響顯示：內聯塊以這種方式放置，即兩個div的50％寬度不適合彼此相鄰。 您可以將行高設置為0或注釋掉空白。

Answer 2

我終於想通了！ 主包裝器的背景圖像也是固定寬度的圖像（如topwrapper）。 一旦我意識到主包裝器的背景圖像僅重復y次，便將其刪除並替換為白色的背景色，看起來很棒。

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

在智能手機上查看響應站點時，左像素被切掉

問題描述

2 個解決方案

解決方案1
0 2015-07-28 19:18:37

解決方案2
0 2015-07-29 17:18:33

在智能手機上查看響應站點時，左像素被切掉

問題描述

2 個解決方案

解決方案1 0 2015-07-28 19:18:37

解決方案2 0 2015-07-29 17:18:33

解決方案1
0 2015-07-28 19:18:37

解決方案2
0 2015-07-29 17:18:33