1

概括

我用 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>
  • 每个按键 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 截图显示问题

这是一个： 显示在 iphone 上创建的元素之间的偏移量

以及神秘“填充物”的放大版 神秘填充物的另一张照片，带有放大的细节

iPad屏幕截图显示期望

这是 ipad 的渲染，按预期工作： 在此处输入图像描述

我已经尽我所能尝试了background-position, position, top, left, margin, padding,border甚至background-size属性，虽然它在每个测试的设备上都很好用，（包括 ipad！）这些行在 iphone 上不会消失。

iphone有什么东西可以让我阻止背景图像吗？

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

4

1 回答 1

1

its the image. if you zoom in any browser, you see the same lines as on the iphone.

i think it comes from the retina-display, doubling all pixels.

you can make a proper image at double size and set it with an media query like

@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");
}

this should fix your issue.

于 2012-05-30T14:00:17.213 回答