-1

我的理解是这样的事情是不可能的。但是我为朋友开发的网站在 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%;
}
4

3 回答 3

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 之类的东西来检测没有插件的操作系统？

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

更新：

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

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

于 2013-02-24T19:20:57.297 回答
0

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

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

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

.opera.platform-macintel .some_class { /* styles only for Opera on Mac */ }
于 2013-02-24T19:27:08.010 回答
0

忘记修复症状。去寻找原因。 这篇文章将告诉你关于这个问题你应该知道的一切：PNG 伽马校正。

最有用的解决方案是从 PNG 图像中分割颜色配置文件。我已经做到了

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

pngcrush官方网站

于 2014-06-19T16:03:33.570 回答