Question

我有一个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。或者，有没有更好的方法来处理这个？

Answer 1

即使我不建议使用浏览器特定的CSS，优化CSS以便在所有浏览器中至少看起来更好，你可以通过使用一些结合CSS的JavaScript来做你想做的事情。< / p>

以下是代码：

<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");

用户代理检测浏览器可能很棘手，所以要小心，如果需要，甚至升级我的功能......

请注意，这只是一个简单的示例......

基于浏览器类型渲染Div

1 个答案: