个人中心
gpt4 book ai didi

css - 根据浏览器类型呈现一个 Div

转载 作者：太空宇宙 更新时间：2023-11-04 15:11:36 24 4
gpt4 key购买 nike

我有一个如下所示的 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。或者，有更好的方法来处理这个问题吗？

最佳答案

即使我不建议使用特定于浏览器的 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");

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

  • 注意，这只是简单的示例...

关于css - 根据浏览器类型呈现一个 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15304848/

24 4 0
文章推荐： python - 如何用空格替换标签 Beautiful Soup
文章推荐： c++ - 为什么无法通过 Call-by-Value 将 mutex 传递给 function？
文章推荐： c++ - while 内打印增量计数变量值
文章推荐： java - JRE 7 update 51 破坏了 java swing 应用程序；出现错误 : access denied ("java.io.SerializablePermission" "enableSubclassImplementation")
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com