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 以使其在所有浏览器中看起来至少相似总是要好得多，您可以通过结合使用一些 javascript 和 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 回答