は画像

からホワイトスペースを削除し、このバイオリンを見てみてください。は画像

を私は単にあなたが見る効果を維持しようとしていますが、私は、画像の下の空白を削除します。私はディスプレイについて知っている：ブロック、しかし、私はそれを行う場合、ホバー効果は動作しません。どのようにそれを修正するための任意のアイデア？

2011-12-16 Spyros

を変更するここでは、この質問への短く、完全な答えだ：http://stackoverflow.com/a/31445364/3597276 –

HTMLを下記に変更すると（style="font-size:0"を追加）、Chrome、Firefox、IE9、Safariで問題が解決されます。私はこの問題を見る前に、ブラウザが見た目のテキストがない場合でも、ある行のテキストをある程度の余分な高さとみなしています。

<div class='fancy_image'> 
    <div class='shadow' style='border:2px solid; float:left;padding:5px;margin:10px;'> 
     <div style="font-size: 0;">  
      <img class='fade' src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width=300 height=200 /> 
     </div> 
    </div> 
</div>

enter image description here

あなたは、それはここで働いて見ることができます：http://jsfiddle.net/jfriend00/8FkmG/。イメージの周りの残りの空白は、HTMLのパディングによって制御されます。

全体的に、あなたのHTML/CSSは、ここでは浮動小数点数と位置を混ぜ合わせてスパン上の位置付けを行うのが難しいです。非常に奇妙な。

出典

2011-12-16 05:26:15 jfriend00

両方の答えは素晴らしい仕事皆さんに感謝:) cssの部分がねじれていることも知っているといいでしょう。私の例ではスパンやポジショニングがありません。浮動小数点を使用しない場合、エフェクトは機能しません。ここで何か良いことができますか？ただ好奇心から、とにかくソリューションのためのおかず – Spyros

どこからjavascriptコードが来たのですか？このようなシンプルなレイアウトには、さまざまなブラウザで異なるCSSを使用する必要はなく、メンテナンスの頭痛になる可能性があります。 – jfriend00

ああ、あなたはJavaScriptについて話していますか？これは準備が整ったスクリプトなので、ok：P – Spyros

あなたの影のdivにline-height:0;を設定します。

出典

2011-12-16 05:27:45 ToddBFisher

はちょうど.fadeのCSSクラスに

.fade {font-size:0px; 
    background: url('http://james.linnegar.com/demos/js/win7/hover.png'); 
}

出典

2011-12-16 05:33:27 Murtaza

答えて

関連する問題