javascript - 如果用户使用 Twitter Bootstrap 不支持的浏览器，我如何显示 div

Question

我正在构建一个基于Bootstrap 3的网站（它已经放弃了对 IE7 和更早版本以及 Firefox 3.6 和更早版本浏览器的支持）。我对此没有任何问题，但我正在寻找一个简单的脚本来显示一个带有警告消息的 div，告诉我的网站的访问者为什么它在他们的旧浏览器中看起来很奇怪。

我遇到了这个脚本，它很有用，除了它显示一个预定义的消息，而我想自定义一个 div 来显示（以更好地适应我网站的主题）。

而不是重新发明轮子 - 有没有人知道一个简单的脚本来做到这一点？

Answer 1

这应该有效。另见这篇文章：http ://css-tricks.com/how-to-create-an-ie-only-stylesheet/

<!--[if lt IE 7]>
    <p>Please use a modern browser!!!</p>
<![endif]-->

TJL

Answer 2

您可以使用链接脚本轻松自定义信息框的样式和布局。看看这里。

---

如果您想要更多自定义，可以使用quirksmode.org上提供的脚本

只需将整个脚本复制到您的 js 文件中（加载页面后 --> 文档准备就绪）

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++) {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {   string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {       // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {       // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

之后，您可以轻松获取浏览器和版本BrowserDetect.browser，BrowserDetect.version然后相应地隐藏或显示信息框（最容易使用 jQuery，因为它已在 Bootstrap 中使用）