CSS/HTML iphone 在背景图像位置的边缘周围放置了一些额外的空间。我该如何删除它？

Question

总结

我用 CSS 和 HTML 创建了一个盒子。它水平和垂直缩放，并保持漂亮的渐变背景和圆角。它仅使用单个 PNG 背景图像（具有多个精灵）。它适用于IE7+

我没有使用 CSS3，因为角落和边框的细微之处使得仅使用 CSS3 几乎不可能重现。此外，它必须在 IE7 和 8 中工作。

我已经成功让它在它需要的所有浏览器中运行，但是问题出在 iphone

---

演示

这里有一个工作示例： http://www.trevorsimonton.com/iosbg/index.html

在该页面的底部，我有各种设备和浏览器中的输出链接。它在我的 HTC Evo 上也很有效，但我无法从该设备发布屏幕截图。

---

问题

由于某种原因，每个div 的背景图像周围似乎都有某种填充或边距或边框或其他东西。我已经在上面的网站上发布了这些截图，并在这篇文章的底部发布了一些截图。

• 这只出现在 iPhone 上。
• 它在最新版本的 Chrome、Safari 和 Firefox 上运行良好。 它也适用于 IE7、IE8 和 IE9
• 用户缩放被禁用，并且比例锁定在 1.0

---

代码

该框具有复杂的标记，允许它在 IE7+ 中缩放和显示图像边框

标记是这样的：

HTML

<div class='ksrfasw'>
  <div class='content-container'>

    <!-- top and top-right corner -->
    <div class='ksrfasw-top'><div>&nbsp;</div></div> 

    <!-- right shadow, stretches down right side -->
    <div class='ksrfasw-rs'>

    <!-- left shadow, stretches down left side -->
    <div class='ksrfasw-ls'>

       <!-- inner gradient -->
       <div class="ksrfasw-tab-content">

          <!-- inner padding -->
          <div class="ksrfasw-tab-content-inner">
             CONTENT -- FINALLY!
          </div>
       </div>
    </div>
    </div>

    <!-- bottom and bottom-right corner -->
    <div class='ksrfasw-bottom'><div>&nbsp;</div></div> 

  </div>
</div>

• 每个key div的背景图都是一样的。 “box.png”——那个 包含不同部分的所有不同“精灵” 谜题。
• 框内还有一个“大括号”，可以让最小高度在 IE7 中工作。
• 是的，这个标记似乎过分了......但它确实按预期工作 浏览器。这是一个完全可扩展的圆角渐变 x 浏览器框。

CSS：

.ksrfasw-top,
.ksrfasw-top div,
.ksrfasw-ls,
.ksrfasw-rs,
.ksrfasw-bottom,
.ksrfasw-bottom div,
.ksrfasw-tab
{
background-image:url("box.png");
background-repeat:no-repeat;
padding:0px;
margin:0px;
border:0px;
outline:0px;
width:100%;
background-size:725px 1120px;
}
.ksrfasw-top div
{
background-position:0px -40px;
}
.ksrfasw-top
{
background-position:100% -60px;
padding-right:12px;
}
.ksrfasw-rs
{
background-position:100% -600px;
padding-right:12px;
}
.ksrfasw-ls
{
background-position:0 -100px;
}
.ksrfasw-bottom div
{
background-position:0px -20px;
}
.ksrfasw-bottom
{
background-position:100% 0px;
padding-right:12px;
}
.ksrfasw-brace
{
height:190px;
float:right;
width:1px;
}

.ksrfasw,
.ksrfasw-content-container
{
position:relative;
}
.ksrfasw-tabbed
{
padding-top:34px;
}
.ksrfasw-content-container
{
z-index:5;
}
.ksrfasw-tab
{
position:absolute;
width:154px;
display:block;
text-decoration:none;
height:61px;
top:0px;
}
.ksrfasw-tab-location
{
left:1px;
}
.ksrfasw-tab-name
{
left:151px;
}
.ksrfasw-tab-active
{
z-index:10;
background-position:-515px -700px;
}
.ksrfasw-tab-active-first .ksrfasw-tab-active
{
background-position:-515px -780px;
}
.ksrfasw-tab-active-first .ksrfasw-top div
{
background-position:5px -40px;
}
.ksrfasw-tab-inactive
{
z-index:1;
background-position:-515px -620px;
}
.ksrfasw-tab-content-inner
{
padding:20px 25px;
}










body
{
text-align:center;
}
#wrapper
{
width:95%;
max-width:700px;
min-width:300px;
margin:0 auto;
}
/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}
.clearfix:after {
  font-size: 0;
}

（注意：在 CSS 和 HTML 中还有其他事情可以在盒子上创建选项卡...不用担心。在示例中，我有 1 个带选项卡的盒子，并且另一个没有。两者都表现出相同的行为）

---

iPhone 截图显示问题

这是一个：

以及神秘“填充”的放大版本

---

显示期待的 iPad 截图

这是 ipad 的渲染，按预期工作：

我已经尽我所能使用background-position、position、top、left、margin、padding、border 甚至background-size 属性，尽管效果很好在每台测试的设备上（包括 ipad！）这些行在 iphone 上都不会消失。

关于 iphone 是否有一些我可以阻止的空间背景图像？

谢谢，如果需要更多示例或链接示例的解释，请告诉我。

Answer 1

它的图像。如果您放大任何浏览器，您会看到与 iphone 上相同的线条。

我认为它来自于视网膜显示器，所有像素加倍。

您可以制作双倍尺寸的正确图像并使用媒体查询进行设置，例如

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .ksrfasw-top,.ksrfasw-top div,.ksrfasw-ls,.ksrfasw-rs,
  .ksrfasw-bottom,.ksrfasw-bottom,div,.ksrfasw-tab{
    background-image:url("box-doublesize.png");
}

这应该可以解决您的问题。