-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などを見つけて、プラグインなしでOSを検出できますか?

ただし、問題は、最初にそれらすべてを使用せずに修正することです。

アップデート：

li を a で囲んでいるため、一貫性のない動作が発生している可能性があります。

これを試してください：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

症状を修正するのを忘れてください。原因を求めてください。 この記事では、この問題について知っておくべきことをすべて説明します: PNG ガンマ補正。

最も有用な解決策は、PNG 画像からカラー プロファイリングをストライプ化することです。私はそれをやった

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

pngcrush公式サイト

于 2014-06-19T16:03:33.570 に答える
0

これは、CSS だけでは不可能です。代わりに、JavaScript を介してブラウザーを検出し、それに応じて動作します。

これを行う一般的な方法の 1 つは、ブラウザ、ブラウザのバージョン、プラットフォームなどを示すボディ クラスを 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 に答える