web-dev-qa-db-ja.com

FirefoxとChrome

マスターページを使用したasp.netの新しいサイトデザインに取り組んでいます。ページのヘッダーは、35ピクセルの高さの「メニューバー」であり、順序付けられていないリストとしてレンダリングされたASPメニューコントロールが含まれています。

選択されたメニュー項目は、異なる色の背景と、左上と右辺の周りに2pxの境界線でスタイル設定されます。選択したメニュー項目の下部がメニューバーの下部に揃うようにして、選択した「タブ」がその下のコンテンツに流れるように見えるようにします。 FirefoxとIEで問題なく見えますが、chromeでは、「タブ」はメニューバーの下部より1ピクセル高いようです。

私が知らないバグがあるのか​​と思っているだけです。

この問題を解決するためのコードが必要になる可能性が高いので、できるだけ早くCSSを投稿してください。

編集：

ここにメニューのCSSがあります...

div.hideSkiplink
{     
    width:40%;
    float:right;
    height:35px;
}

div.menu
{
    padding: 0px 0px 0px 0px;
    display:inline;
}

div.menu ul
{
    list-style: none;
}

div.menu ul li
{
    margin:0px 4px 0px 0px;
}

div.menu ul li a, div.menu ul li a:visited
{
  color: #ffffff;
  display: block;
  margin-top:0px;
  line-height: 17px;
  padding: 1px 20px;
  text-decoration: none;
  white-space: nowrap;
}

div.menu ul li a:hover
{
  color: #ffffff;
  text-decoration: none;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: none;
  border-left: 1px solid #fff;
}




div.menu ul li a:active
{
 background:#ffffff !important;
 border-top:2px solid #a10000;
 border-right:2px solid #a10000;
 border-bottom: none;
 border-left:2px solid #a10000;
 color: #000000 !important;
 font-weight:bold;

}


div.menu ul a.selected
{
  color: #000000 !important;
  font-weight:bold;
}

div.menu ul li.selected
{
 background:#ffffff !important;
 border-top:2px solid #a10000;
 border-right:2px solid #a10000;
 border-bottom: none;
 border-left:2px solid #a10000;
}

div.menu ul li.selected a:hover
{
  border: none;
}

選択したクラスがjqueryを介してliおよびa要素に追加されます...

これが問題のスクリーンショットです... chromeの例は上部にあり、タブの下に1pxの赤い枠線が表示されます。下部には、すべてが問題なく見えるFirefoxの画像があります。

alt text

編集：

これを少し試してみたところ、実際には「ヘッダー」のdiv自体がクロムで1ピクセル成長していることがわかりました。これは私には非常に奇妙に見えます。

asp.netcssfirefoxgoogle-chrome
25
stephen776

Webページは常に異なるブラウザーで異なるように表示されることを認識することが重要です。ピクセルの完全性を達成することは無駄であり、最近では、すべてのブラウザーでサイトをまったく同じようにレンダリングするためにどのようなコストがかかるかをクライアントに説明しようとしています。今では、IE6とFF4でページが同じように表示されないことをよく理解しています。クライアントにウェブのダイナミクスを理解して受け入れてもらう必要があります。

プログレッシブエンハンスメントとグレースフルデグラデーション。平和。

0
Niklas Wulff

これらの答えはどれも問題を解決しません。

セットする：

line-height: 1;
padding-top: 2px;

Webkitとmozillaのレンダリングエンジンは行の高さを異なる方法で実装するため、これを使用して単一の行項目の測定を操作しないでください。

メニュー、ボタン、特に非常に小さい通知バブルなどのアイテムの場合、行の高さを通常にリセットし、パディングまたはマージンを使用して同じように動作させます。

この問題を説明するJSFiddleは次のとおりです。 http://jsfiddle.net/mahalie/BSMZe/6/

68
mahalie

同じ問題が発生しました。タブリンクである<li>要素を含む<a>要素に行の高さとフォントサイズを明示的に設定することで解決しました。これが将来の誰かを助けることを願っています。

（編集されたHTMLリンク）

14
Jarrett

これは、一部のサイトでよくある問題です... IEピクセルの違いがある場合、通常はマージン/パディングのピクセルをIEスタイルシートです。しかし、それがSafari/FireFox/Chromeの場合、通常はピクセルと一緒に住んでいて、FireFoxの群衆を今のところ幸せにします（WebkitがWebを支配するまで！）。反対のブラウザ。

ただし、含まれているulまたはdiv要素の行の高さの値をチェックアウトする（または、値がない場合は追加する）こともできます。これをいじくり回すことで、FireFox、ChromeおよびIEでまったく同じパディングを取得できました。

3
geerlingguy

これが this page で見つけた解決策です：

   button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
3
Maxulus

私はしばらくの間この問題と戦っており、ほとんどピクセルをあきらめました。しかし、それらのeurikaの瞬間の1つで私に来ます：Chrome（Firefoxでオーバーラップを残す））でタブが完全に並んでいる場合、ulの高さをliの高さに設定します（パディングを含む）、ulでオーバーフローを非表示に設定することにより、Firefoxで問題のあるピクセルを削除できます。

これが誰かを助けることを願っています！

2
DJ Quilter

私のメインタブがChromeでそれらを表示するのと同じ問題がありました。それらは高さが1ピクセルずれていて、タブとメインフレームの白い背景の間に醜いスリットを残していたためです。

私は、タブdivに浮動値を使用して上部マージンを与えることで問題を解決しました。最初にmargin-top：0.1pxを試してから0.2などを試してみました。上部マージンが0.5になるまで、すべての主要なブラウザですべてがうまく表示されました。

1
Alexander

私はまったく同じ問題を抱えていました、chromeズームが110％に設定されていて、それがメニューを壊していたことがわかりました。起動したときに気づきましたchrome別のコンピュータとそれはうまく見えた。

1
artfulhacker

背景が透明なテキストに関してこの問題に遭遇しました。

上記の解決策をどれも一貫して機能させることができなかったため、結局、Webkitハックを使用して、それらのブラウザーに異なる行の高さを与えました。そのようです：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .your-class {
        line-height:20px;
    }
}

あら、ハッキー！ CSSハックを回避しようとしていますが、別の方法を見つけることができませんでした。それが誰かのお役に立てば幸いです。

0
kdev

私は次のように設定することで、使用していたWebフォントでこの問題を解決することができました。

.some-class {
    display: inline-table;
    vertical-align: middle;
}

それは少しハックですが、仕事をします。 Internet Explorer専用のターゲットスタイルが存在することを意味します

0
SomeBloke

mozilaに別のcssを作成することもできます。

-moz-height:2em;

次のものも使用できます：

@-moz-document url-prefix{
    // your css
}
0
shekhar patel

これが唯一の方法だと思う、問題のあるセクションごとにブラウザごとに異なるスタイルを使用する

/* FOR MOZILLA */
@-moz-document url-prefix() { 
.selector {
 color:Lime;
}
}
/* FOR CHROME */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome, if Chrome rule needed */
.container {
 margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
 margin-top:0px;
}``
0
insaneray

display：block with a element "を使用してみてください。

<li><a href="">Link</a></li>

css：

li{line-height:20px;}/*example only*/

li a{display:block;}
0
Manny

私にも同様の問題があり、フォントサイズ、マージン、パディングにemsを使用したことが原因でした。ブラウザはemsを異なる方法で丸め、コンテンツの長さに応じて、サイト全体で断続的に1pxオフの問題を引き起こしていました。すべてをピクセル測定に変更したら、問題はなくなりました。

お役に立てれば！

0
gregtheross

もしline-heightは、コンテナー内のテキストを垂直方向に配置するために使用され（そうすべきではありません）、ブラウザー間で一貫した動作を次のように実施できます。

line-height: 75px
height: 75px
overflow: hidden
0
Mario