爲什麼我的網站在Windows上呈現與在Mac上不同的瀏覽器或版本？

Chrome 25 Mac Chrome 23 Windows Firefox 19 Mac Firefox 19 Windows IE 8 爲什麼我的網站在Windows上呈現與在Mac上不同的瀏覽器或版本？

（圖像，從頂部：鉻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版本那樣顯示，並且它們似乎都以幾乎相同的「錯誤」方式顯示，即菜單項字體大小被誤解或重寫 - 因爲它們都顯示相同我認爲這不能是一個瀏覽器不兼容，而是一個系統。

是什麼導致這種情況，以及如何以及在哪裏創建系統特定的黑客？我是一名業餘愛好者，對此並不瞭解。我肯定知道一件可能做得不正確的事情是我強迫搜索表單進入導航欄的笨拙方式......這是我唯一可以讓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*/

來源

2013-03-08 Elliott

很難肯定地說，當您不提供任何網站代碼時，我的猜測是操作系統提供的字體有所不同。 – Barmar 2013-03-08 20:29:46

Windows和OSX之間的字體呈現完全不同。這可能會導致您的字體在OSX上顯得更大或更大。默認情況下， – Axel 2013-03-08 20:29:55

Mac OSX字體比窗口更大膽。 – Huangism 2013-03-08 20:36:35

這是你的罪魁禍首：

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

論line 168 styles.css

您正在爲這些錨鏈接設置默認大小，但它沒有被應用到輸入元素（搜索）。這就是爲什麼他們在Windows中都不知所措。它不適用於Mac瀏覽器。

來源

2013-03-08 21:09:05

非常好，我認爲這已經奏效！因爲我正在修改一個主題，所以我避免了搞亂任何東西，我不知道它是什麼。我想知道爲什麼那個選擇器是這樣設計的，爲什麼/它是如何操作的？謝謝！ – Elliott 2013-03-08 22:53:48

很高興聽到它！請記住標記這是你的答案，如果它適合你。 – 2013-03-08 23:41:17

最大的可能是你使用的字體是僅適用於Windows，但不能在Mac，你應該指定像這樣幾個不同的字體：

font-family: Arial, Helvetica, sans-serif;

來源

2013-03-08 20:30:16 user2019515

謝謝，我應該提到我正在導入一種字體。這可能不是這種情況下的一個很好的答案，可能嗎？ – Elliott 2013-03-08 20:54:16

正如所說的@ user2019515，你更可能使用的是不可用的OSX的字體，使用一個：

標準字體如font-family: Arial, Helvetica, sans-serif;
谷歌的Web字體http://www.google.com/webfonts
的Cufónhttp://cufon.shoqolate.com/generate/（完美每次不管呈現操作系統或瀏覽器的字體）

來源

2013-03-08 20:35:25 bizzehdee

謝謝，我應該提到我正在導入一種字體。這可能不是這種情況下的一個很好的答案，可能嗎？ – Elliott 2013-03-08 20:50:39

如果您導入的字體及其渲染方式不同，我會與Cufon一起將字體轉換爲矢量格式並將其存儲在JS文件中，並使用該矢量格式將字體呈現爲自身，使字體無論如何什麼瀏覽器/ os – bizzehdee 2013-03-08 21:01:54

@bizzehdee這不是字體的錯。有一個CSS選擇器覆蓋12px的默認字體大小30px。檢查我的答案。刪除該樣式規則可修復該問題。是的，在Windows中字體稍微有些塊，但是什麼字體不是？儘管使用Cufon是一個很好的**建議來解決這個問題。 – 2013-03-08 21:10:38

爲什麼我的網站在Windows上呈現與在Mac上不同的瀏覽器或版本？

回答

相關問題