0

次のような div タグがあります。

<div id="loadingDiv" class="loadingDiv"; style="position:absolute; left:400px; top:292px;">
    <strong>Retrieving Data - One Moment Please...</strong>
</div>

Chrome と IE はこれを同じ方法でレンダリングしないようです。IE では、テキストは Chrome よりもはるかに左側にあります。これがなぜなのかわかりません。では、ブラウザの種類に依存するスタイルを作成する方法はありますか? たとえば、ブラウザが IE の場合、左の値を 300px に、Chrome の場合は 400px にします。または、これを処理するためのより良い方法はありますか?

4

1 に答える 1

1

ブラウザー固有の CSS を使用することはお勧めしませんが、CSS を最適化して、すべてのブラウザーで少なくとも同じように見えるようにすることをお勧めします。

コードは次のとおりです。

<html>
<head>

<title>browser specific css</title>

<style>

    .loadingDiv {

        position: absolute;
        display: none;
        font-weight: bold;

    }

    .loadingDiv.ie {

        display: block;
        left: 300px; 
        top: 292px;
        background: #00CCFF;
        color: #454545;

    }

    .loadingDiv.chrome {

        display: block;
        left: 400px; 
        top: 292px;
        background: #FCD209;
        color: #E53731;

    }

    .loadingDiv.firefox {

        display: block;
        left: 400px; 
        top: 292px;
        background: #D04F16;
        color: #FFFFFF;

    }

    .loadingDiv.default {

        display: block;
        left: 400px; 
        top: 292px;

    }

</style>

<script>

    window.onload = function() {

        var check_for_ie = detect_browser("MSIE");
        var check_for_chrome = detect_browser("Chrome");
        var check_for_firefox = detect_browser("Firefox");

        var browser_name = "";

        var loading_div = document.getElementById("loadingDiv");
        var loading_div_html = loading_div.innerHTML;

        if (check_for_ie == true) {
            browser_name = "Internet Explorer";
            loading_div.className = "loadingDiv ie";
        }
        else if (check_for_chrome == true) {
            browser_name = "Google Chrome";
            loading_div.setAttribute("class","loadingDiv chrome");
        }
        else if (check_for_firefox == true) {
            browser_name = "Firefox";
            loading_div.setAttribute("class","loadingDiv firefox");
        }
        else {
            browser_name = "Unchecked browser";
            loading_div.setAttribute("class","loadingDiv default");
        }

        loading_div.innerHTML = loading_div_html + "(you are browsing with "+browser_name+")";

    }

    function detect_browser(look_for) {

        var user_agent_string = navigator.userAgent;
        var search_for_string = user_agent_string.search(look_for);

        if (search_for_string > -1) {
            return true;
        }
        else {
            return false;
        }

    }

</script>

</head>
<body>

    <div id="loadingDiv" class="loadingDiv" >
        Retrieving Data - One Moment Please...
    </div>

</body>
</html>

そして、ここに実際の例があります:
http://simplestudio.rs/yard/browser_specific_css/browser_specific_css.html

編集：

他のブラウザを確認する必要がある場合は、その特定のブラウザのユーザー エージェント文字列を見て、その中で一意のものを見つけて、そのブラウザと他のブラウザとの違いを作り、次のように使用します。

var check_for_opera = detect_browser("Opera");

ユーザー エージェントによるブラウザの検出は難しい場合があるので注意してください。必要に応じて機能をアップグレードすることもできます...

  • これは簡単な例にすぎないことに注意してください...
于 2013-03-08T23:29:05.753 に答える