【问题标题】:ie8 and ie9 loads <head> content in <body>ie8 和 ie9 在 <body> 中加载 <head> 内容
【发布时间】:2014-07-08 18:44:29
【问题描述】:

我在一些旧版本的 Internet Explorer 中遇到了一个有趣的问题。

在以下网站www.inzone.dk 上,商店工作正常,所有 html 都正确呈现。然而,在购物车上,我注意到源代码正确显示 &lt;head&gt; 内容,但是当我在 f12 开发人员工具中查看源代码时,我只看到 &lt;head&gt; 内容中的标题,以及所有元标签和css加载在&lt;body&gt;

这在 ie10 或 ie11 中不是问题,在 Firefox 或 Chrome 中也不是,所以坦率地说我很困惑。

你能帮帮我吗?

编辑:添加&lt;header&gt;html

<head>
    <meta charset="UTF-8">
    <title>Indkøbskurv Billige corsager hos Corsage-eksperten.dk</title>
    <base href="http://www.corsage-eksperten.dk/">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="/index.php?route=feed/latest_products_rss&amp;currency=DKK" rel="alternate" type="application/rss+xml">
    <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/polianna/stylesheet/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/polianna/stylesheet/responsive.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/polianna/stylesheet/camera.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/polianna/stylesheet/accordion.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/polianna/stylesheet/cloud-zoom.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/polianna/stylesheet/topmenu.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/polianna/stylesheet/news.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/polianna/stylesheet/fast_order.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css">
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen">

    <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        if (!window.jQuery) {
            document.write('<script src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"><\/script>');
        }
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script>
        if (!window.jQuery.ui) {
            document.write('<script src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"><\/script>');
        }
    </script>
    <script type="text/javascript" src="catalog/view/javascript/common.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox-min.js"></script>
    <!-------------------------------Polianna js---------------------------------------------------------------->
    <script type="text/javascript" src="catalog/view/theme/polianna/js/custom.js"></script>
    <script type="text/javascript" src="catalog/view/theme/polianna/js/menu_script.js"></script> 
    <script type="text/javascript" src="catalog/view/theme/polianna/js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="catalog/view/theme/polianna/js/jquery.masonry.min.js"></script>
    <script type="text/javascript" src="catalog/view/theme/polianna/js/jquery.gpCarousel.js"></script>
    <script type="text/javascript" src="catalog/view/theme/polianna/js/newselect.js"></script>
    <script type="text/javascript" src="catalog/view/theme/polianna/js/jquery.slick.1.2.min.js"></script>
    <script type="text/javascript" src="catalog/view/theme/polianna/js/cloud-zoom.1.0.2.min.js"></script>
    <script type="text/javascript" src="catalog/view/theme/polianna/js/jquery.tinycarousel.min.js"></script>
    <script type="text/javascript" src="catalog/view/theme/polianna/js/jquery.accordion.js"></script>
    <script language="javascript" src="catalog/view/theme/polianna/js/jquery.tipsy.js" type="text/javascript"></script>
    <script language="javascript" src="fastorder/fast_order.js" type="text/javascript"></script>
    <script language="javascript" src="catalog/view/theme/polianna/js/scroll/scrolltopcontrol.js" type="text/javascript"></script>
    <!--[if IE 7]> 
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie7.css" />
    <![endif]-->
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
    <script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">
    DD_belatedPNG.fix('#logo img');
    </script>
    <![endif]-->
    <style type="text/css">
        body{ 
            background-color: #EEEEEE; 
            background-image: url("catalog/view/theme/polianna/image/pattern/overlay6.png"); 
        }
        #colorbox, #cboxOverlay, #cboxWrapper{ 
            z-index:10003; 
        }
        #header, .breadcrumb, #topfooter, .main{ 
            background-color: #000000; 
        }
        .colormenu{ 
            background-color: #FB2B75; 
        }
        .menuResp > li > a, .mobilemenu a, .navbar .textmenu{
            color: #FFFFFF; 
        }               
        .menuResp > li:hover > a{ 
            color: #FFFFFF; 
        }
        .menuResp > li:hover{ 
            background-color: #000000; 
        }
        .menuResp > li > div{ 
            background-color: #FFFFFF; 
        }
        .menuResp ul li a, .menuResp > li > div > ul > li > a, .menuResp > li > div > a { color: #000000; }             
        .menuResp ul li a:hover, .menuResp > li > div > a:hover, .menuResp > li > div > ul > li > a:hover{ 
            color: #FB2B75; 
        }               
        .menuResp > li > div > ul > li > a span{ 
            background-color: #F4F4F4; 
        }               
        .box-category > li > a, .box-account > li > a, .vtabs li a{ 
            color: #000000; 
        }               
        .box-category li a:hover, .box-category > li > a.active, .box-account li a:hover,
        .vtabs li a:hover, .vtabs li a.selected{ 
            color: #FB2B75; 
        }
        .box-category li  a:hover, .box-category > li > a.active, .vtabs li a.selected,
        .box-account li a:hover{ 
            border-color:#FB2B75; 
        }           
        #footer h3 { 
            color: #FFFFFF; 
        }               
        #footer .column a{ 
            color: #AAAAAA; 
        }               
        #footer .column a:hover{ 
            color: #FFFFFF; 
        }               
        #footer .column a:hover{ 
            background-color: #5E6067; 
        }               
        #footer, #powered, #powered a{ 
            color: #888888; 
        }               
        a, a b, .product-compare a{ 
            color: #FB2B75; 
        }               
        a:hover, .breadcrumb a:hover, .product-compare a:hover, .boxfeatured .name a:hover, .product-grid .name a:hover, .product-list .name a:hover, .boxfeatured .description a:hover,
        .product-list .description a:hover, .checkout-heading a:hover, .st-accordion ul li > a:hover, .top-nav #topbox > a:hover,
        .verticaltab .name a:hover, .product-grid .description a:hover, .box-news h4 a:hover, .htabs a.selected, .htabs a:hover{
            color: #FB2B75;
        }
        .block:hover{ 
            border-color: #FB2B75; 
        }
        .htabs a.selected, .htabs a:hover{ 
            border-top-color: #FB2B75; 
        }
        h1, h2, h4, .welcome #title, .product-info #opname, .verticaltab .name_categ a{ 
            color: #000000; 
        }               
        .boxfeatured .name a, .product-grid .name a, .product-list .name a, .verticaltab .name a{ 
            color: #000000; 
        }               
        #column-left .box .box-heading, #column-right .box .box-heading, .manufacturer-heading{ 
            color: #000000; 
        }               
        .box .box-heading, #fast_order_form .fast_order_center{ 
            color: #000000; 
        }               
        body, .boxfeatured .description a, .product-info .price-tax, .product-info .price .reward,
        .product-info .price .discount, .cart-total td b{ 
            color: #777777; 
        }               
        #cart > a{ 
            background-color: #FB2B75; 
        }               
        .boxfeatured .price, .product-grid .price,  .product-list .price, .product-info .price, .verticaltab .price, .compare-info .price{ color: #48D42D; }                
        .boxfeatured .price-old, .product-grid .price-old, .product-list .price-old, .product-info .price-old, .verticaltab .price-old, .compare-info .price-old{ 
            color: #888888; 
        }               
        .boxfeatured .price-new, .product-grid .price-new, .product-list .price-new, .product-info .price-new, .verticaltab .price-new, .compare-info .price-new{ 
            color: #FB2B75; 
        }               
        .savemoney{ 
            background-color: #FB2B75;
        }               
        .boxfeatured .cart a.button, .product-grid .cart a.button, .product-list .cart a.button, .cart input.button,
        .verticaltab .cart a.button, a.button, input.button, a.checkbut, a.redbutton, button, .box-news .readmore{ 
            background-color: #32353A; 
        }               
        .boxfeatured .cart a.button:hover, .product-grid .cart a.button:hover, .product-list .cart a.button:hover, .verticaltab .cart a.button:hover, .colorbox div#plus,
        .wishlist a:hover, .compare a:hover, .cart input.button:hover, a.button:hover, input.button:hover, a.checkbut:hover, button:hover,  a.redbutton:hover, .box-news .readmore:hover,
        a#arrow_left:hover, a#arrow_right:hover{ 
            background-color: #FB2B75; 
        }               
        .cart input.button, .product-list .cart a.button, .wishlist a:hover,  .compare a:hover, .product-info .compare a:hover, .product-info .wishlist a:hover,
        a.button, input.button, a.checkbut, a.redbutton, button, .box-news .readmore{ 
            color: #FFFFFF; 
        }               
        h1, .product-info .price,  .welcome #title, .verticaltab .name_categ a{ 
            font-size: nonepx; 
        }               
        h2{ 
            font-size: nonepx; 
        }               
        h3, #footer h3, .product-info #opname{ 
            font-size: nonepx; 
        }               
        h4, .box-news h4 a{ 
            font-size: nonepx; 
        }               
        .box .box-heading, #fast_order_form .fast_order_center{ 
            font-size: nonepx;
        }               
        #column-left .box .box-heading, #column-right .box .box-heading{ 
            font-size: nonepx; 
        }               
        .boxfeatured .name a, .product-grid .name a, .product-list .name a, .verticaltab .name a{ 
            font-size: nonepx; 
        }               
        body, input, textarea, select, .product-info .price-tax, .product-info .price .reward, .product-info .price .discount, .menuResp ul li a{ 
            font-size: nonepx; 
        }               
        .boxfeatured .price, .product-grid .price, .product-list .price, .verticaltab .price{ 
            font-size: nonepx; 
        }               
        .menuResp > li > a, .mobilemenu a, .navbar .textmenu{ 
            font-size: nonepx; 
        }               
        .menuResp > li > div > ul > li > a, .mobilemenu ul a{ 
            font-size: nonepx; 
        }               
        .box-category > li > a, .box-account > li > a, .vtabs li a { 
            font-size: nonepx; 
        }               
        .colormenu{ 
            width:1170px; 
        }
        .category-list{ 
            display:none;
        }           
        .product-grid .description{ 
            display:block; 
        }           
        @media only screen and (max-width: 1200px){
            .colormenu{ 
                min-width:270px; width: auto;
                }
        }   
    </style>     
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-38099464-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("textarea").keypress(function(event) {
                if (event.keyCode != 13) return;
                e.preventDefault();
            var msg = $("textarea").val().replace("\n", "");
            if (!util.isBlank(msg)) {
                send(msg);
                $("textarea").val("");
            }
            return false;
            });
        });
    </script>
    <link rel="stylesheet" href="catalog/view/javascript/jquery.cluetip.css" type="text/css">
    <script src="catalog/view/javascript/jquery.cluetip.js" type="text/javascript"></script>        
    <script type="text/javascript">
        $(document).ready(function() {
        $('a.title').cluetip({splitTitle: '|'});
            $('ol.rounded a:eq(0)').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', showtitle: false});
            $('ol.rounded a:eq(1)').cluetip({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'mouse'});
            $('ol.rounded a:eq(2)').cluetip({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'bottomTop', topOffset: 70});
            $('ol.rounded a:eq(3)').cluetip({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true});
            $('ol.rounded a:eq(4)').cluetip({cluetipClass: 'rounded', dropShadow: false});  
        });
    </script>           
</head>

【问题讨论】:

  • 在问题中将代码贴在&lt;head&gt;&lt;/head&gt; 中。

标签: html css internet-explorer internet-explorer-8 internet-explorer-9


【解决方案1】:

我同意@Code。另外,做一些 HTML 验证。将 CSS、JavaScript 和 HTML 组合在一起,使得验证和故障排除变得困难(尤其是在不知道我们应该验证哪个版本的 HTML 的情况下)。但通常,经过验证的代码有助于防止浏览器变体,因为某些浏览器比其他浏览器更宽容。

查看http://validator.w3.org/

【讨论】:

    【解决方案2】:

    您可能想尝试清理您的代码,将您的 css 移动到一个单独的文件,并在关闭 body 标记后在代码底部运行您的 javascript。将这些东西分开将有助于调试代码中的错误。只是对未来的提示。

    【讨论】:

    • 更改 opencart 加载各种文件的方式超出了我的范围,坦率地说,为了解决跨浏览器问题,不需要这样做。虽然我完全同意这将是最佳的,但它仍然无法解决问题,因此将其作为已接受的答案进行检查似乎并不正确,抱歉 :)
    • 你用的是哪个版本的opencart?
    【解决方案3】:

    我曾在 Server Side Include 中看到过这种情况。这是因为 Web 服务器包含的某些文件的文本编码为 UTF8-“With BOM”。我使用 Notepad++ 将文本编码更改为 UTF8-“无 BOM”,它立即解决了问题。

    【讨论】:

    • 感谢您的回复,我尝试清理 ~15 utf8 BOM 文件,虽然我很乐观,但这似乎并没有解决问题。
    猜你喜欢
    • 2015-08-19
    • 1970-01-01
    • 2013-01-10
    • 1970-01-01
    • 2015-05-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多