0

Mozilla では完璧に見え、Chrome では不完全に見える同じ画像。ここに画像があります。これらのタイプのバグの理由とその解決方法を教えてください。

1 番目は Mozilla で、2 番目は Chrome です。

モジラクロム

CSSコードは、

.freeimg
{
    position            : relative;
    top                 : 80px;
    border              : 1px solid #CCCCCC;
    border-right        : 0;
    background-color    : #FFF;
    cursor              :  pointer;
    margin-left         : -35px;
    -moz-border-radius  : 10px 0px  0px 10px;
}

HTML コードは通常どおりです。

<div class="fl freeimg" style="float:left;">
 <img src="/images/freeImg.gif" height="160" width="32" onClick="SlideMe()" />
</div>
4

4 に答える 4

2

追加font-size:0

HTML

<div class="fl freeimg">
 <img src="http://www.brightpay.co.uk/i/signup-launcher.png" onClick="SlideMe()" />
</div>​

CSS

 .freeimg
{
    position            : relative;
    float:left;
    top                 : 80px;
    border              : 1px solid #CCCCCC;
    border-right        : 0;
    background-color    : #FFF;
    cursor              :  pointer;
    border-radius  : 10px 0px  0px 10px;
    font-size:0
}    
.freeimg img
{        
    border-radius  : 10px 0px  0px 10px;
     margin:0; padding:0
}​

デモ

于 2013-01-02T07:49:25.377 に答える
1

この目的で css を動的に変更する場合は、javascript チェック条件を使用します

if (navigator.appVersion.indexOf("Chrome/") != -1) {
 // modify button 
}

この下で、クロムのみのCSS変更を行います

于 2013-01-02T07:41:32.657 に答える
1

ここで説明されているようなスタイルシートを読み込んで、最初に CSS のリセットを試してください。

http://developer.yahoo.com/yui/reset/

ブラウザにはさまざまなデフォルトがあり、これらの値を独自の設定で上書きしない限り、適用される場合があります。あなたの特定のケースでは、次を追加してみます：

padding: 0;
margin: 0;

そして、それが違いを取り除くかどうかを確認してください。ただし、reset.css上記で説明したように a を使用することは、この種の違いを回避するためのベスト プラクティスです。

于 2013-01-02T07:47:05.157 に答える
0

このタイプの問題を解決するには、条件付きの CSS コメントを記述する必要があります。これはCSSの問題に他なりません。コードを投稿してください。この問題を解決するのに役立つかもしれません

以下のコードのように

Firefox の要素を検査し、CSS スタイル別の CSS ファイルを Firefox ブラウザー用に調整し、以下のコードを追加します。

if ( $.browser.mozilla == true ) { document.write(""); }

于 2013-01-02T07:36:20.047 に答える