3

クローム 25 マック クロム 23 ウィンドウ Firefox 19 マック Firefox 19 Windows IE8

（画像、上から：Chrome 25 Mac、Chrome 23 Windows、FF 19 Mac、FF 19 Windows、IE 8）

browsershots.orgによると、私のサイトは、現在主要な Mac OS X ブラウザー (Firefox 18-19、Chrome 23-25、Safari 5-6) のそれぞれを使用したときに、希望どおりに表示されます。しかし、Windows では、IE8 や Opera 12 を含むこれらの同じブラウザーのそれぞれが、対応する Mac のブラウザーのようには表示されず、ほとんど同じ「間違った」方法で表示されているように見えます。これらはすべて同じように表示されるため、これはブラウザーの非互換性ではなく、システムの非互換性に違いないと思います。

何が原因で、システム固有のハックを作成する方法と場所は? 私はアマチュアで、これについてあまり知りません。おそらく正しく行われていないことの 1 つは、検索フォームをナビゲーション バーに無理やり押し込んだ不器用な方法であることは確かです。これが、Wordpress のテーマ テーマでメニュー検索フォームを機能させる唯一の方法でした。きちんと分類されていないように感じますが、これらのことがわかりません。

TL;DR: すべての主要なブラウザーは、特定のプラットフォームでサイトを同じように表示しますが、サイトは異なるプラットフォーム間で同じように表示されません.

うまくいけば関連するCSS：

#access,.menu a,.current_page_item {
    display: compact;
    border: none;
    font-size: 30px;
    font-family: 'ChopinScriptRegular', Palatino, Helvetica !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -1px;   
}

/*Search form*/
#searchform{
    border: none;
}
#searchform input{
    font-family: 'ChopinScriptRegular', Palatino, Helvetica;
    font-size: 30px;
    border: none;
}
::-webkit-input-placeholder {
    color: #666;
    padding-top: 9px;
}
:-moz-placeholder { /* Firefox 18- */
    color: #666;
    padding-bottom: 2px;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #666;
    padding-bottom: 2px;
}
:-ms-input-placeholder {  
    color: #666;
}
input, select {
    width: 135px;
    height: 50px;
    border: none;
    background: none !important;    /* menubg search hover, see default.css*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.widget_search .screen-reader-text{
    display: none;
}
/*FF*/
@-moz-document url-prefix() {
    input, select {position: relative; bottom: 2px;}
}
/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    input, select {position: relative; bottom: 5px;}
}

/*end*/
4

3 に答える 3

3

これがあなたの犯人です：

.windows .sf-menu a {
  font-size: 12px;
}

styles.cssline 168の

これらのアンカー リンクの既定のサイズを設定していますが、入力要素 (検索) には適用されていません。そのため、それらはすべて Windows で不安定です。Mac ブラウザには適用されません。

于 2013-03-08T21:09:05.947 に答える
1

@ user2019515 が言ったように、OSX で利用できないフォントを使用している可能性が高いため、次のいずれかを使用します。

  1. などの標準フォントfont-family: Arial, Helvetica, sans-serif;
  2. Google Web フォントhttp://www.google.com/webfonts
  3. Cufon http://cufon.shoqolate.com/generate/ (OSやブラウザに関係なく、毎回完璧にフォントをレンダリングします)
于 2013-03-08T20:35:25.767 に答える
0

ほとんどの場合、Windows でのみ使用でき、Mac では使用できないフォントを使用している可能性があります。次のように、いくつかの異なるフォントを指定する必要があります。

font-family: Arial, Helvetica, sans-serif;
于 2013-03-08T20:30:16.640 に答える