0

I have a problem with margin-top in IE. I have given a link a margin-top of 2px to align it out correctly in Chrome. But this caused a offset in IE9.

Some code:

CSS

.show_cart{
    display: block!important;
    float:left;
    padding-left: 10px;
    margin-top: 2px;
}

HTML

<div class="show_cart">
    <a href="/reba/nl/winkelwagen">Toon Winkelwagen</a>
</div>

I hope there is a quickfix but I couldn't find it.

EDIT - Sorry I edit it here but I can't find the code thingy in the comment box. Anyway, I changed it to this based on the answer which stated that I should use the vertical align. Chrome is still displaying properly but in IE its now off by 2px to the TOP.

.vmCartModule .show_cart{
    display: inline!important;
    float:left;
    padding-left: 10px;
}

.vmCartModule .show_cart a{
    vertical-align: baseline
}
4

3 に答える 3

1

マージン以上のものがあります。要素をテキストに並べようとするときは、font-size、vertical-align なども考慮する必要があります。ピクセルを計算することはお勧めしません。すべてのブラウザーで一貫性が保たれることはなく、維持するのも非常に困難です。代わりに、より決定論的な「vertical-align:baseline」に固執するようにしてください。これを使用すると、テキストが常に適切に配置されていることを確認できます。

于 2012-07-04T08:13:36.607 に答える
0

HTML5 Boilerplate http://html5boilerplate.com/を使用している場合に備えて

IE9の同じクラスに異なる値を使用できます-

.ie9 .show_cart{
    margin-top: 0px;
}

または、これにjQueryを使用したい場合にのみ、次のように書くことができます-

if ($.browser.msie && parseInt($.browser.version) == 9){
  $('.show_cart').css({'margin-top':'0px'});
}
于 2012-07-04T08:05:22.937 に答える
0

これは IE の有名な二重マージン バグとまったく同じように聞こえます。ここで説明されているように簡単に修正できます。

に変更display: block;してみてくださいdisplay: inline;。または、別の解決策を見つけることができます (たくさんあります)。または、前述の HTML5 ボイラープレートまたはheadjsなどのようなものを使用できます。

于 2012-07-04T08:12:40.090 に答える