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では、ボックスの上にタブを作成するために他のことが行われています...心配しないでください。この例では、タブ付きのボックスとタブなしのボックスがあります。どちらも同じ動作を示します）

問題を示すiPhoneのスクリーンショット

これが1つです： 要素間のiphoneで作成されたオフセットを示しています

神秘的な「パディング」のズームバージョン 不思議なパディングの別のショット、ズームされた詳細

期待を示すiPadのスクリーンショット

これがipadによるレンダリングで、期待どおりに機能します。 ここに画像の説明を入力してください

私は、、、、、、、、さらにはプロパティを使ってできる限りbackground-positionのことを試しました。テストしたすべてのデバイス（ipadを含む）でうまく機能しますが、これらの行はiphoneでは消えません。positiontopleftmarginpaddingborderbackground-size

私が防ぐことができる背景画像の間隔を空けるiphoneについて何かありますか？

おかげで、リンクされた例のより多くの例または説明が必要な場合は私に知らせてください。

4

1 に答える 1

1

そのイメージ。いずれかのブラウザを拡大すると、iPhoneと同じ行が表示されます。

私はそれが網膜ディスプレイから来ていると思います、すべてのピクセルを2倍にします。

2倍のサイズで適切な画像を作成し、次のようなメディアクエリで設定できます。

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

これで問題が解決するはずです。

于 2012-05-30T14:00:17.213 に答える