Question

我有以下javascript：

    <script  type="text/javascript">
        var isMobile = {
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };

        navigator.sayswho = (function () {
            var ua = navigator.userAgent, tem,
            M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
            if (/trident/i.test(M[1])) {
                tem = /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
                return 'IE ' + (tem[1] || '');
            }
            M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
            if ((tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1];
            return M.join(' ');
        })();
        var browserversion1 = navigator.sayswho.split(" ");
        var browserversion2 = browserversion1[1].split(".")[0].split(",");
        var isIeLessThan10 = (browserversion1[0] == "IE" || browserversion1[0] == "MSIE") && browserversion2[0] < 10
        //alert(isIeLessThan10);

        if (!isMobile.any()) {
            if (isIeLessThan10) {
                alert("IE<10");
                document.write('<link rel="stylesheet" href="theStyles/defaultStyle_ie.css" type="text/css" charset="utf-8" />');
                document.write('<link rel="stylesheet" href="theStyles/captionStyle_ie.css" type="text/css" charset="utf-8" />');
            }
            else {
                alert("IE>=10 || !IE");
                document.write('<link rel="stylesheet" href="theStyles/defaultStyle.css" type="text/css" charset="utf-8" />');
                document.write('<link rel="stylesheet" href="theStyles/captionStyle.css" type="text/css" charset="utf-8" />');
            }
        }
        else {
            alert("mobile");
            document.write('<link rel="stylesheet" href="theStyles/defaultStyle_mobile.css" type="text/css" charset="utf-8" />');
            document.write('<link rel="stylesheet" href="theStyles/captionStyle_mobile.css" type="text/css" charset="utf-8" />');
        }
</script>

上述脚本会检查浏览器是移动浏览器还是全功能浏览器。如果它是一个完整的功能浏览器，那么检查IE版本是否小于10，如果是，那么加载defaultStyle_ie.css样式表，否则如果它是IE10或更高版本或任何其他浏览器加载defaultStyle.css样式表。一切都在FireFox，Chrome和IE8中运行。当我在IE10中加载页面时，正在加载IE8版本样式表。我该如何解决这个问题？

Answer 1

根据我的评论，加载正常的样式表。

然后为移动设备添加媒体条件。

然后加载IE9或更少的样式表

<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css">

<!-- mobile stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media='screen and (max-device-width: 480px)'>
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media='screen and (max-device-width: 480px)'>

<!-- if ie version 9 or less -->

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css">
<![endif]-->

Answer 2

问题是你在IE中处于兼容模式，然后发送旧版本。您可以通过点击F12

来检查开发控制台中的模式

为什么IE10加载旧的IE版样式表

2 个答案: