【问题标题】:Display a Message When a Browser is Unsupported不支持浏览器时显示消息
【发布时间】:2010-09-25 18:43:58
【问题描述】:

我想警告使用我网站的 Internet Explorer 6 用户,IE6 过去与我的网站存在严重的兼容性问题。最好的方法是什么?

理想情况下,我希望出现一条消息(不是新窗口,而是一个消息框,如果可能的话),警告 IE6 用户出现问题并建议他们更新到 IE7、Firefox 3 或 Opera 9.5。

【问题讨论】:

标签: internet-explorer popup cross-browser


【解决方案1】:

我的建议是修复您的网站 ;) 不认真,我会在页面顶部使用一个小横幅,就像 Firefox 和 IE 中不显眼的小对话框一样。不是消息框或实际上会干扰很多的东西。

【讨论】:

    【解决方案2】:

    针对 IE 的最佳方法是使用条件 cmets。然后,您可以添加一些仅在 Internet Explorer 中显示的特定 HTML。

    <!--[if IE 6]>
    <h1>Please upgrade your browser!</h1>
    <![endif]-->
    

    关于这个主题的更多信息:

    http://www.quirksmode.org/css/condcom.html

    【讨论】:

      【解决方案3】:

      Conditional comments 提供了一种仅显示特定 Internet Explorer 版本的内容的方式。

      <!--[if IE 6]>
      Special instructions for IE 6 here
      <![endif]-->
      

      【讨论】:

        【解决方案4】:

        我的建议是不要使用弹出窗口或消息框。它们非常烦人,并导致糟糕的用户体验。最好在通知中插入一些&lt;div&gt; 并使其从页面的其余部分中脱颖而出。不要过度,只需为其分配一些颜色,以确保它不会被忽视 (请:不要使用&lt;blink&gt; ;-)

        【讨论】:

          【解决方案5】:

          虽然告诉用户更新他们的浏览器并且他们实际这样做会很棒,但实际上不会发生。如果用户现在还没有升级他们的浏览器,通常是有原因的,缺乏计算机知识或无法控制计算机本身。例如,员工在工作机器上浏览您的网站。

          我真的认为您应该重新考虑解决用户将遇到的问题或考虑进行渐进式增强。这个想法是,您网站的基本功能适用于每个浏览器,然后开发任何额外的功能,以便它仅在支持它的浏览器上可见/可用。

          【讨论】:

            【解决方案6】:

            如果你想确定它是否支持浏览器之外的任何东西,你可能想要使用 jQuery 的浏览器检测,比如:

            <script type="text/javascript">
            // check if browser is IE6 (when IE) or not FF6 (when FF)
            if (($.browser.msie && $.browser.version.substr(0,1) == '6')
                || ($.browser.mozilla && $.browser.version.substr(0,1) != '3')) {
                    $('#browserWarning').show();
            }
            </script>
            

            更新:正如different 所说,更好的选择是使用IE if 语句,例如:

            <style type="text/css">
            /* this would probably be in a CSS file */
            #browserWarning { display:none; }
            </style>
            <!--[if IE 6]>
            <style type="text/css">
            #browserWarning { display:; }
            </style>
            <![endif]-->
            

            此选项要好得多,因为它不需要浏览器版本“完美”。但是,如果您想检测其他浏览器,因为它们不支持 if 语句,这将不起作用。那么你可能想使用 jQuery 来检测浏览器,尽管我建议尽量避免使用它。

            【讨论】:

            • 但这不符合 IE 版本 60 到 69!
            • @nickf:为什么它不能在 IE 60 到 69 上工作?它只需要浏览器版本的第一个字符......所以6
            • 该实现有两处错误。您正在专门测试 IE6 而不是 IE if (parseInt($.browser.version) < 7) { ... }) 会更好。您当前的实现将 IE 版本 60 到 69 检测为版本 6。Opera 版本 10 处于 alpha 阶段,当人们将版本 10 检测为版本 1 时,已经看到(不良)浏览器检测的缺陷。my.opera.com/Andrew%20Gregory/blog/2008/05/11/…
            【解决方案7】:

            好的,我会简化的。没有弹窗!一场统计灾难。这是一个很好的小东西,它位于 .我真的只担心 IE 6 或更早版本,因为它是破坏我的设计的最大罪魁祸首。下面是一个条件语句(我认为最好的方法)。

            把这个放在头上(放任何你想要的内容):

            <!--[if lte IE 6]>
            <div id="warning">
            <h4 class="red">Your Browser Is Not Supported!</h4><br />
            <p>Please upgrade to <a href='http://getfirefox.com'>FireFox</a>, <a href='http://www.opera.com/download/'>Opera</a>, <a href='http://www.apple.com/safari/'>Safari</a> or <a href='http://www.microsoft.com/windows/downloads/ie/getitnow.mspx'>Internet Explorer 7 or 8</a>. Thank You!&nbsp;&nbsp;&nbsp;<a href="#" onClick="document.getElementById('warning').style.display = 'none';"><b>Close Window</b></a></p>
            </div>
            <![endif]-->
            

            将此粘贴​​在您的外部样式表中。 我不会使用内联样式

            #warning        {position:relative; top:0px; width:100%; height:40px; background-color:#fff; margin-top:0px; padding:4px; border-bottom:solid 4px #000066}
            

            随心所欲地设计它 - 发疯!您可以使用 javascript 非常具体地检测任何浏览器,因此如果您知道如何,它可以增加更大的特异性。

            这将是一个漂亮的小盒子,位于您的内容之上,让您的用户看到他们的浏览器很糟糕。

            【讨论】:

              【解决方案8】:

              有一个名为 Push Up the Web 的项目建议所有用户升级到更新版本的浏览器。它不显眼且易于添加。

              正如一些人建议的那样,最好的办法是使用条件 cmets 有效地定位 Internet Explorer。

              对于其他评论者来说,随着 Internet Explorer 8 的发布(它有效地添加了两个额外的浏览器进行测试:标准 + 兼容模式),Internet Explorer 6 已经完成了它的进程。是时候让这些人升级浏览器了,在某些情况下升级操作系统/计算机。 Internet Explorer 6 是holding back 网络的进步。这是支持资源的消耗。它已达到 Netscape 4 的状态。各大网站和公司也加入了这场战斗。

              更多阅读:

              【讨论】:

              • 上推网络的链接不再有效。域似乎已过期。
              • 仅供参考,这些都已经过时了。我认为这个问题需要一个新的答案......
              【解决方案9】:

              https://browser-update.org

              网页设计师主动通知用户浏览器更新

              【讨论】:

                猜你喜欢
                • 2017-07-16
                • 2020-07-11
                • 1970-01-01
                • 1970-01-01
                • 2018-09-16
                • 2014-05-03
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多