Question

我的理解是这样的事情是不可能的。但我为朋友开发的网站在Chrome for Windows 7/8与Chrome for Mac OS X中的呈现方式不同。

链接到问题中的网站：Phillip Elder Music

请注意其中一个版本中“联系人”选项卡的悬空。

IE9中的渲染显示了同样的问题，但我能够创建一个对齐所有内容的IE特定表。

以下是Chrome目前使用的CSS。请告诉我如何在两个操作系统上进行底部对齐。

    /*________Navigation and Body_________*/
body {
    background-image: url(../images/drumKeyboard.png);
    background-color: #fbfbfb;
    background-size: 960px 208px;
    background-repeat:no-repeat;
    background-position: top center;
}

nav ul {
    font-family: 'Cabin', sans-serif;
    list-style: none;
    text-align: right;
    margin-top: 30px;
    margin-right: -15px;
}

nav ul a {
    text-decoration: none;
    color: black;
}

nav ul li:hover {
    background-color: black;
    color: #fbfbfb;
}

nav ul li {
    padding: 3px 20px 6px 0px;
    margin-left: 25px;
    margin-bottom: 3px;
    border-radius: 13px 0px 0px 13px;
}

img.logo {
    border: none;
    height: 180px;
    width: 180px;
}

/*________Content________*/

.tabs .active {
    color: #fbfbfb;
    position: relative;
}

.tabs .active li {
    background-color: black;
}

.panelContainer {
    clear: both;
    margin-bottom: 25px;    
    padding: 10px;
    font-family: sans-serif;
}

.panel p {
    color: black;   
}

/*_________Unordered Lists CSS______*/

ul.upcoming {
    list-style: none;
    margin-left: -40px;
}

ul.upcoming li {
    margin:31px 0px 0px 0px
}

ul.media {
    list-style: none;
    margin-left: 0px;
}

ul.media li {
    margin:24px 0px 0px 0px
}

ul.works {
    list-style: none;
    margin-left: -40px;
}

ul.works li {
    margin:24px 0px 0px 0px
}

/*____________Link CSS_____________*/

a {
    border: none;
    color: #73b3e1;
}

a:visited {
    border: none;
    color: #73b3e1;
}

a.media {
    border: none;
    color: #000000;
}

a.media:visited {
    border: none;
    color: #000000;
}

/*__________Images CSS___________*/

img.follow {
    border: none;
    height: 70px;
    width: 320px;
}

img.social.first{
    border: none;
    padding-left: 40px;
    padding-right: 20px;
    width: 8%;
}

img.social.middle{
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    width: 8%;
}

img.social.last{
    border: none;
    padding-left: 20px;
    padding-right: 40px;
    width: 8%;
}

Answer 1

您可以使用msie条件注释来定位不同的msie版本：

<!--[if IE 7]><body class="lt-ie10 lt-ie9 lt-ie8 ie7"><![endif]-->
<!--[if IE 8]><body class="lt-ie10 lt-ie9 ie8"><![endif]-->
<!--[if IE 9]><body class="lt-ie10 ie9"><![endif]-->
<!--[if gt IE 9]><!--><body><!--<![endif]-->

您可以在css中使用一些媒体查询来过滤webkit / moz：

@media screen and (-webkit-min-device-pixel-ratio:0) {

    button>span+span, .button>span+span {
        margin-left: 7px;
    }

}

对于其他所有内容，您可以使用javascript查找jQuery/Javascript to detect OS without a plugin?

等内容

但是，问题是，首先尝试修复它而没有所有这些东西。

更新：

你正在用一个wrapping包裹li，也许这就是为什么你的行为不一致。

试试这个：http://jsfiddle.net/cwNKX/1/

HTML

<div id="menu">
    <div>
        <a href="#">Home</a>
        <a href="#">Biography</a>
        <a href="#">Works</a>
        <a href="#">Media</a>
        <a href="#">Contact</a>
    </div>
</div>

CSS

#menu {
    position: relative;
    width: 587px;
    height: 208px;
    background: #fbfbfb url("http://phillipeldermusic.com/images/drumKeyboard.png") no-repeat -1522px 0;
}

#menu div {
    position: absolute;
    bottom: 0;
    right: 477px;
    width: 110px;
}

#menu a {
    display: block;
    padding: 5px;
    text-align: right;
    font-family: Cabin, sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    color: #000;
    border-radius: 15px 0 0 15px;
}

#menu a:hover {
    color: #fff;
    background-color: #000;
}

#menu a + a {
    margin-top: 3px;
}

顺便说一下，调整背景图片的大小。

Answer 2

仅在CSS中这是不可能的。相反，通过JavaScript检测浏览器并采取相应的行动。

这样做的一种常见方法是让JavaScript添加体类，表示浏览器，浏览器版本，平台等等。像BAPS之类的东西为你做这件事（检查演示页面上的DOM，你会看到它添加的身体类）。

因此，例如，如果您只想为Mac Opera上的用户添加一些样式，您可以在页面中包含BAPS JS脚本，然后在CSS中编写以下内容：

.opera.platform-macintel .some_class { /* styles only for Opera on Mac */ }

Answer 3

忘记修复症状。为事业而去。 This article会告诉您有关此问题的所有信息：PNG伽马校正。

最有用的解决方案是从PNG图像条纹颜色配置文件。我已经用

做到了

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

pngcrush official site

使用CSS定位操作系统？

3 个答案: