0

CSS と IE9、そして MacOS の Chrome でさえも、非常に苛立たしい問題が発生しています。

コンテナー #categories {width: 960px} に 4 つの画像の ul があります。

各 img (li) はボックス .catBox {width: 220px; に含まれています。フロート: 左; 余白: 20px 25px 10px 0px}.

.catBox:last-child {margin-right: 0px;} を使用して、最後の画像の右マージンを取り除きました。

基本的に、私がやろうとしているのは、幅 960px のコンテナー全体で 4 つの画像を正当化することです。これは、ローカル コンピューターの Chrome、Safari、FF、および IE9 で正常にレンダリングされ、Chrome、Safari、および FF は Windows マシンからリモートで正常に動作します。

IE でリモートでテストすると、最後の画像が次の行にプッシュされます。また、Mac 上の Chrome でテストすると、同じことが行われます。

これが私の計算です: 220px * 4 画像 = 880px. 25px = 75px の 3 つの余白 (最後の余白を削除)。75 + 880 = 955 ピクセル。これにより、これらのブラウザのいずれかで 5px の「バッファ」が得られるはずです。誰か助けてくれませんか？私はこれについて間違って考えていますか？

よろしくお願いします。

HTML

<div id="categories">
<ul>
<li class="catBox"><img src="img/3mmwpolytongue22mm.jpg" alt=""><div class="caption"><h2>Stone</h2></div> 
</li>
<li class="catBox"><img src="img/4g5.5m12ws.JPG" alt=""><div class="caption"><h2>Wood</h2></div></li>
<li class="catBox"><img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt=""><div class="caption"><h2>Teflon & Polymer</h2></div></li>
<li class="catBox"><img src="img/13mmblueindianearrings1.jpg" alt=""><div class="caption"><h2>Custom</h2></div></li>
</ul>
</div>

CSS

#categories {
    width: 960px;
    height: 240px;
}

.catBox {
    position: relative;
    display: inline;
    overflow: hidden;
    width: 220px;
    margin: 20px 25px 10px 0px;
    float: left;
    z-index: -999;
}

.catBox:last-child {
    margin-right: 0px;
}

.caption {
    position: absolute;
    top: 190px;
    width: 220px;
    height: 30px;
    background-color: #333;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    text-align: center;
    z-index: 999;
    padding: 0px;
}

.caption h2 {
    color: #fff;
}
4

3 に答える 3

0

問題ありません。スペースキーではなく、空白を使用するにはTabキーを使用する必要があります。ここに、FF、Chrome、SafariでテストされたJSFiddleがあります。

http://jsfiddle.net/PwkAW/

于 2012-04-08T19:35:13.117 に答える
0

説明している動作が表示される理由が正確にはわかりません。リモートサーバーですべてのCSSがまったく同じであるという事実を知っていますか？私が推測しなければならなかった場合、あなたの李に影響を与えている別のルールがあります。リモートサーバーリンクを共有できますか？

また、マークアップとCSSを大幅に簡素化できます。私はそれがあなたが見ているものを修正すると言っているわけではありませんが、それは少なくとも状況のいくつかの変数を取り除くでしょう。あなたが持つことができます：

<ul id="categories">
  <li>
     <img src="img/3mmwpolytongue22mm.jpg" alt="" />
      <h2>Stone</h2> 
  </li>
  <li>
      <img src="img/4g5.5m12ws.JPG" alt="" />
      <h2>Wood</h2>
  </li>
  <li>
      <img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt="" />
      <h2>Teflon & Polymer</h2>
  </li>
  <li>
      <img src="img/13mmblueindianearrings1.jpg" alt="">
      <h2>Custom</h2>
  </li>
 </ul>

次に、CSSは次のようになります。

#categories {
width: 960px;
height: 240px;
}

#categories li {
    position: relative;
    display: inline;
    overflow: hidden;
    width: 220px;
    margin: 20px 25px 10px 0px;
    float: left;
    z-index: -999;
}

#categories li:last-child {
    margin-right: 0px;
}

#categories h2 {
    position: absolute;
    top: 190px;
    width: 220px;
    height: 30px;
    background-color: #333;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    text-align: center;
    z-index: 999;
    padding: 0px;
    color: #fff;
}

実際、CSSのリファクタリングで、問題に気づきました-このルール：

catBox:last-child

期待どおりに機能しません。少なくとも私の経験では、最後の子のルールは、セレクターの一部としてクラスに適用された場合は機能しません。#categories li：last-childのように、まっすぐな要素でのみ機能するようです。そのため、期待どおりに右マージンが削除されない場合があります。

于 2012-04-10T01:47:41.597 に答える
0

タグ間のすべての空白を削除します。ピクセル精度のレイアウトに干渉する可能性があります。

于 2012-04-08T19:25:36.423 に答える