3

铬 25 Mac 铬 23 窗口 火狐19 Mac 火狐 19 窗口 即 8

（图片，从上到下：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 对应的那样显示，而且它们似乎都以几乎相同的“错误”方式显示，即菜单项 font-size 要么被误解，要么覆盖——因为它们都显示相同，我认为这一定不是浏览器不兼容，而是系统不兼容。

是什么导致了这种情况，以及如何以及在哪里创建特定于系统的黑客攻击？我是一个业余爱好者，对此知之甚少；我确信可能没有正确完成的一件事是我将搜索表单强制进入导航栏的笨拙方式......这是我可以使菜单搜索表单适用于 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;
}

关于line 168styles.css

您正在为这些锚链接设置默认大小，但它并未应用于输入元素（搜索）。这就是为什么它们在 Windows 中都很不稳定。它不适用于 Mac 浏览器。

于 2013-03-08T21:09:05.947 回答
1

正如@user2019515 所说，您很可能使用 OSX 中不可用的字体，请使用以下之一：

  1. 标准字体，例如font-family: Arial, Helvetica, sans-serif;
  2. 谷歌网络字体http://www.google.com/webfonts
  3. Cufon http://cufon.shoqolate.com/generate/（无论操作系统或浏览器如何，每次都能完美呈现字体）
于 2013-03-08T20:35:25.767 回答
0

很可能您正在使用一种仅在 Windows 上可用但在 Mac 上不可用的字体，您应该指定一些不同的字体，如下所示：

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