オーバーフロー：私の期待通りに隠れていない

私は、サーバーによって生成された画像のリストを表示するhtmlページを持っていますが、画像の下2％を表示したくありません。私の解決策は、オーバーフローをイメージの包含divに隠してから、インラインブロックを表示するように設定した後にイメージに2％のマージントップを与えることでした。これは、私が構築した概念的なページの単純な証明のためにはうまくいきましたが、実際のページではそうではありませんでした。私は両方のページhereをアップロードしました。オーバーフロー：私の期待通りに隠れていない

編集： jsbinページ：

working

non-working

私はChromeとIE9の両方を試してみたが、ブラウザ

のいずれかには運がこれは、ページのHTMLではありませんそれはうまくいかないと思っています。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <link rel="stylesheet" type="text/css" href="./Test_files/ci.css"> 
</head> 
<body> 
    <div id="StockListTable" class="ListTable"> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 1" src="./Test_files/GetPreviewImage"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 2" src="./Test_files/GetPreviewImage(1)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 3" src="./Test_files/GetPreviewImage(2)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 4" src="./Test_files/GetPreviewImage(3)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 5" src="./Test_files/GetPreviewImage(4)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 6" src="./Test_files/GetPreviewImage(5)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 7" src="./Test_files/GetPreviewImage(6)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 8" src="./Test_files/GetPreviewImage(7)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 9" src="./Test_files/GetPreviewImage(8)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 10" src="./Test_files/GetPreviewImage(9)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 11" src="./Test_files/GetPreviewImage(10)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 12" src="./Test_files/GetPreviewImage(11)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 13" src="./Test_files/GetPreviewImage(12)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 14" src="./Test_files/GetPreviewImage(13)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 15" src="./Test_files/GetPreviewImage(14)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 16" src="./Test_files/GetPreviewImage(15)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 17" src="./Test_files/GetPreviewImage(16)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 18" src="./Test_files/GetPreviewImage(17)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 19" src="./Test_files/GetPreviewImage(18)"/></div> 
     <div class="PreviewCell"> <img style="border-style:none" alt="Preset 20" src="./Test_files/GetPreviewImage(19)"/></div> 
    </div> 
</body> 
</html>

とCSS

html 
{ 
    margin:0; 
    padding:0; 
    width:100%; 
} 

body 
{ 
    margin:0; 
    padding:0; 
    font-family:sans-serif; 
    color:white; 
    background-color:black; 
    width:100%; 
    overflow-x:hidden; 
} 

.PreviewCell 
{ 
    width:12%; 
    height:20%; 
    overflow:hidden; 
    float:left; 
    padding-left:1px; 
    padding-right:1px; 
} 

.ListTable 
{ 
    margin:0; 
    width:104%; 
    height:86%; 
} 

.PreviewCell img 
{ 
    display:inline-block; 
    width:100%; 
    height:100%; 
    margin-top:2%; 
}

それは、画像の上部に余白を追加しないが、それはオーバーフローを隠していない、それだけで、画像の行がそれらの間のより多くのスペースを持っています。

ここでは動作するページです。

<html> 
<head> 
    <style type="text/css"> 
     .testimage 
     { 
      display:inline-block; 
      width:100%; 
      height:100%; 
      margin-top:2%; 
     } 
     .container 
     { 
      width:12%; 
      height:20%; 
      overflow:hidden; 
      float:left; 
      padding-left:1px; 
      padding-right:1px; 
     } 
    </style> 
</head> 
<body bgcolor="#000000"> 
    <div class="container"> 
     <img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/> 
    </div> 
    <div class="container"> 
     <img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/> 
    </div> 
    <div class="container"> 
     <img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/> 
    </div> 
    <div class="container"> 
     <img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/> 
    </div> 
</body> 
</html>

私は、これは私も（私は決してしない）ページを検証し、それがチェックアウトされていることに動作していない理由をするように混乱しています。

どのようなヘルプも素晴らしいでしょう。あなたは下の余白を削除したい場合は、白線を削除するために探しているなら

出典

2012-04-13 nick

プロジェクトの '.zip'を提供するのではなく、jsbin.comで簡単にデモをオンラインで作成する方がよいでしょう。 – Sampson

私たちは何が起こっているのか混乱していますか？.. jsfiffle（http://jsfiddle.net）を使って問題をより効率的に告げることができます。 –

@Jonathan私はjsbinデモのリンクを追加しました。それは本当に素敵なツールです、ありがとう – nick

、あなたがnegative margin cropping technique.

.PreviewCell img 
{ 
display:inline-block; 
width:100%; 
height:100%; 
margin-bottom: -4%; 
}

を使用することができ、最小の割合は、ブラウザの幅によって異なります。

出典

2012-04-13 20:05:40

私はそれが正のトップマージンを使用して動作しなかった理由は完全にはわかりませんが、 – nick

オーバーフロー：私の期待通りに隠れていない

答えて

関連する問題