2

私のウェブサイトはhttp://proustscookies.blogspot.com/です。CSSを使用して検索フォームに添付されたボタンのスタイル設定に取り組んでいます。

CSSは次のとおりです。

input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

margin-leftコマンドは、FirefoxとChromeでうまく機能しますが、Safariではまったく機能しません。

他のすべてのCSSルール（サイトの上およびサイト全体、データは表示されていません）は、3つのブラウザーすべてで機能しています（前回はIEでもチェックしました）。

Chrome拡張機能スタイルボットを使用してオブジェクト名（input.gsc-search-button）を見つけました。残念ながら、基になるhtmlはどこにも見つかりません（これはブロガーが提供するウィジェットです。Googleがコードをどこかに隠している可能性がありますか？わかりません）。

Safariでマージンが表示されない理由や、検索ボックスのhtmlを見つける方法を誰かが教えてくれたら、とてもありがたいです。

4

2 に答える 2

2

それはグーグルによって上書きされます。もし、するなら：

margin-left: 10px!important;

あなたはそれを上書きすることができます。

または、次のような操作を行うことで、セレクターをより具体的にする（したがって、セレクターを優先する）ことができます。

td.gsc-search-button input.gsc-search-button {
   margin-left: 10px;
}

ヒント：要素（FirefoxまたはChrome）を右クリックし、[要素の検査]をクリックして、その要素に関連付けられているcssを確認できます。

于 2013-03-08T03:53:39.733 に答える
1

私は、モバイルサファリを除いてすべてのスタイルが正しく適用されたという同様の問題を抱えていました。これは非常に奇妙なことです。デスクトップサファリでも動作しました！

結局、より正確なターゲティングで修正しました。私は前にこれを持っていました：

.phone{
  background-color:gray;
}

この変更により修正されました。

  div.phone {
    background-color:gray;
  }

ちなみに、私はモバイルサファリのインスペクターを使ってそれを理解しました。http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787

于 2016-08-12T20:07:26.407 に答える