web-dev-qa-db-ja.com

Twitter Bootstrap-Internet Explorerのナビゲーションバーの問題

私はTwitterを使用していますBootstrap in my Rails app。私のnavbarはFirefoxで完璧に見えます/ Chrome/Safari（tested = chrome）Internet Explorerでは、uglyに見えます！色とすべてが間違っています。

あなたが提供できるどんな助けでもいただければ幸いです。役立つコードを投稿できます。

更新

これは、bootstrap（sass-Rails gemを介してアプリに持ち込まれた）からのすべてをオーバーライドするすべてのCSSです。）うまくいけば、正しい方向に進んでくれるでしょう。

注：以下にcolor:#F8F8F8;がある場合、以前は#333がありました。これは、それを修正しようとする私の反復の1つにすぎません。私のプリコンパイラーが#333334を#333333に変更していると思うので、背景色を#333に変更してみました（確かにわかりません）

/*  Styling */

.navbar, .navbar-inner, .navbar-fixed-top, .container, #tabs .nav {
  border:none;
  background-image:none;
}

.navbar {

  font-size:14px;
  text-shadow:none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  .nav {
    float:right;
  }

  .brand {
    margin-left:30px;
    color:#333334;
    font-family: Georgia, serif
  }

  .navbar-inner {
      background-color: #F8F8F8;
      border-bottom-color: #E0E0E0;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      color: #333334;
  }


}

.navbar .nav > li > a {
  text-shadow:none;
  color:#555555;
  background-color: transparent;
  cursor:pointer;

  &:hover {
    color:#E6E6E6;
  }
}

.navbar .nav .active > a, .navbar .nav .active > a:hover {
  background-color: transparent;
  color: #555555;
}

.navbar .nav .inactive > a:hover {
  color:#999999;
}

.navbar .nav > li > a.sign-in {
  color:#555555;
  padding-top:4px;
  padding-bottom:4px;
  margin-top:5px;
  margin-left:30px;
}

.navbar .nav > li > a.sign-in:hover {

  background-position: 0 0px;

}

.navbar .nav > li > a.active-button {
  background-color: #E6E6E6;
  background-image: none;
  border:1px solid #cccccc;
  border-radius:4px;
  box-shadow: none;
  cursor: pointer;
  opacity: 0.6499999761581421;
  outline-color: #555555;
  outline-style: none;
  outline-width: 0px;
  text-decoration: none;
  text-shadow: none;
  padding-top:4px;
  padding-bottom:4px;
  margin-top:5px;
}

私は次のことも試しました（Bootstrapからのグラデーションに関係する何かを明示的に上書きする試みで）：

body {
  color:#333334;
}

.navbar-inner {
  background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
  background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}

.btn-navbar {
  background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
  background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}

まだ別の更新

Internet Explorer開発者ツールをいじり回して、問題はこれであると私に思わせます：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF333333',endColorstr='#F2222222', GradientType=0)

これは何ですか？必要ですか？ （なぜそれはfirefox/chromeと同じグラデーションを使用しないのですか？）ブートストラップに由来します...何らかの理由でIEがFF333333あの紺色。

cssinternet-explorerfirefoxtwitter-bootstrap
19
Brandon

Bootstrapによって生成されたデフォルトのフィルターコードを上書きすることで、これを修正できたことがわかりました。ネイサンとアンドレスに感謝します！上記で投稿したコードを上書きするために、次のコードを追加しました。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F8F8F8', GradientType=0)

これが誰かのためにいくつかの痛みを救うことを願っています...

22
Brandon

Andres IlichはOPについてコメントしました：

「filter:noneナビゲーションバーで（完全に忘れて）、IEは別の構文を使用してグラデーションを生成します。background-imageは、グラデーションを作成するIE9ではまだサポートされていません。」

額を机の上で何度もたたくことによって非常に苦しい額を開発した後、これはまさに私にとって問題を修正したものです。アンドレスありがとう。

14
IAmFledge

これも私に起こりました。しかし、CSSグラディエントでは、IE（9でも）は3文字の16進コード以外は表示されないようです。そのため、16進コードを3文字に変更する必要があります。それらはまだ（#CCCから#CCCCCCなど）ではないので、IEで正しく機能します（IEの場合のみ） =グラデーションCSS、すべてではない）。

CSSを投稿していただければ、他に問題がないかどうかを確認できます。しかし、私の問題は、#CCCがIEで紺色として解釈されていたことでした。

1
Nathan

トップナビゲーションバーの背景に無地を使用していることがわかるので、背景色を追加するだけで、背景画像も削除しないので、次のようにリセットしてみてください。

  .navbar-inner {
      background-color: #F8F8F8;
      background-image:none;
      border-bottom-color: #E0E0E0;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      color: #333334;
  }
1
Andres Ilich

Internet Explorerは、別のスタイルシートを使用して、サイトの他の部分をめちゃくちゃにせずに探索を修正するという、私が通常やっていることをめちゃくちゃにすることに非常に優れています。次のコード行をWebページに貼り付けます。

<!--[if IE]>
  <link rel="stylesheet" href="styles/fix_internet_explore.css">
<![endif]-->

explorerで見栄えをよくするためにCSSを変更します。他のブラウザがこのスタイルシートを無視するのが良い点です。

0
Tatenda Munenge

これははるかに簡単です：

.dropdown-menu>li>a:hover, 
.dropdown-menu>li>a:focus, 
.dropdown-submenu:hover>a, 
.dropdown-submenu:focus>a,
.dropdown-menu>li.active>a
{
   filter: none;
}
0
William