使用 CSS 的目标操作系统？答案

【问题标题】：Target Operating system with CSS?使用 CSS 的目标操作系统？
【发布时间】：2013-02-09 21:53:05
【问题描述】：

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

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

在 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%;
}

【问题讨论】：

能否提供问题的截图？另外：针对 IE 宽度条件 cmets 将不再适用于 IE10。
尝试验证您的 html validator.w3.org/…
试图根据操作系统提供特定样式只是自找麻烦。

标签： html css windows macos google-chrome

【解决方案1】：

您可以使用 msie 条件 cmets 来定位不同的 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? 之类的内容

但是，问题是，先尝试在没有所有这些东西的情况下修复它。

更新：

您正在用 a 包装 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;
}

顺便说一句，调整背景图像的大小。

【讨论】：

我对上面列出的 CSS 进行了所有更改（关于
和并相应地调整了 jquery，上面的代码仍然给我同样的问题。Chrome for Windows 悬垂了 3px。但我想我还是会保留这些更改，使代码更清晰、更易于阅读。谢谢！