0

我的网站 HeelsFirstTravel.com 在有人仅在 IE 8 中查看单个帖子时出现问题。

帖子右上角的粉红色框(http://www.heelsfirsttravel.com/2013/07/09/another-reason-to-go-to-vegas-bacon-edition/)渗入整个仅在 IE 8 中的背景。

我已经尝试主动将背景设置为白色,但这没有什么区别。

知道如何在保留盒子的同时修复这个浏览器吗?

编辑:一位用户坚称这只是几天前才开始的,这让我更加摸不着头脑。什么都没有真正改变!

谢谢!

-珍妮

<?php get_header(); ?>
<?php $template = get_post_meta($post->ID, 'wpzoom_post_template', true);?>

<div id="main"<?php 
if ($template == 'side-left') {echo' class="sidebar-reversed"';}
if ($template == 'full') {echo' class="full-width full-width-post"';} 
?>>

    <?php while (have_posts()) : the_post(); ?>

    <div id="content">

        <div class="single-content">

            <h1 class="title"><?php the_title(); ?></h1>
            <p class="postmeta"><?php if (option::get('post_category') == 'on') { ?><span class="category"><?php _e('In ', 'wpzoom'); the_category(', '); $prev = TRUE; ?></span><?php } ?>
                <?php if (option::get('post_author') == 'on') { if ($prev) {echo ' / '; } ?><span class="author"><?php _e('By', 'wpzoom'); ?> <?php the_author_posts_link(); $prev = TRUE; ?></span><?php } ?>
                <?php if (option::get('post_date') == 'on') { if ($prev) {echo ' / '; } ?><time datetime="<?php the_time("Y-m-d"); ?>" pubdate><?php the_time("j F Y"); ?></time><?php $prev = TRUE; } ?>
                <?php if (option::get('post_comments') == 'on') { if ($prev) {echo ' / '; } ?><?php comments_popup_link( __('0 comments', 'wpzoom'), __('1 comment', 'wpzoom'), __('% comments', 'wpzoom'), '', __('Comments are Disabled', 'wpzoom')); } 
                edit_post_link( __('Edit post', 'wpzoom'), ' / ', ''); ?></p>

            <?php if (option::get('post_share') == 'on') { ?>
            <div class="divider social">
                <span class="share_btn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe></span>
                <span class="share_btn"><a href="http://twitter.com/share" data-url="<?php the_permalink() ?>" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></span>
                <div class="cleaner">&nbsp;</div>
            </div><!-- end .divider .social -->
            <?php } ?>

            <?php
            $videoEmbedCode = get_post_meta($post->ID, 'wpzoom_post_embed_code', true); // get video embed code
            if ($videoEmbedCode)
            {

                $videowidth = 630;
                $videoheight = 360;

                if (strlen($videoEmbedCode) > 10){
                    $videoEmbedCode = preg_replace("/(width\s*=\s*[\"\'])[0-9]+([\"\'])/i", "$1 $videowidth $2", $videoEmbedCode);
                    $videoEmbedCode = preg_replace("/(height\s*=\s*[\"\'])[0-9]+([\"\'])/i", "$1 $videoheight $2", $videoEmbedCode);
                    $videoEmbedCode = str_replace("<embed","<param name='wmode' value='transparent'></param><embed",$videoEmbedCode);
                    $videoEmbedCode = str_replace("<embed","<embed wmode='transparent' ",$videoEmbedCode);

                    echo "<div class=\"video\">$videoEmbedCode</div>"; ?>

                <?php 
                } // if strlen of video > 10

            } // if video ?>

            <?php the_content(); ?>
            <div class="cleaner">&nbsp;</div>
            <?php wp_link_pages(array('before' => '<p class="pages"><strong>'.__('Pages', 'wpzoom').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
            <?php if (option::get('post_tags') == 'on') { ?><?php the_tags( '<p class="tags"><strong>'.__('Tags', 'wpzoom').':</strong> ', ', ', '</p>'); } ?>

            <div class="cleaner">&nbsp;</div>

            <?php if (option::get('post_share') == 'on') { ?>
            <div class="divider social">
                <span class="share_btn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe></span>
                <span class="share_btn"><a href="http://twitter.com/share" data-url="<?php the_permalink() ?>" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></span>
                <div class="cleaner">&nbsp;</div>
            </div><!-- end .divider .social -->
            <?php } ?>

        </div><!-- end .single-content -->

        <div class="cleaner">&nbsp;</div>

        <?php if (option::get('post_related') == 'on') { 
            if ($template == 'full') {
                get_template_part('related-posts', 'full');
            }
            else {
                get_template_part('related-posts');
            }
        } ?>

        <?php if (option::get('post_comments') == 'on') { ?>
        <div class="widget">

            <p class="title title-medium border-dotted"><span><?php _e('discuss','wpzoom');?></span> <?php _e('this post','wpzoom');?></span></p>
            <div id="comments">
                <?php comments_template(); ?>  
            </div>
        </div><!-- end .widget -->
        <?php } ?>

        <div class="cleaner">&nbsp;</div>

    </div><!-- end #content -->

    <?php if ($template != 'full') { ?>
    <aside>

        <?php get_sidebar(); ?>

    </aside>
    <?php } ?>

    <?php endwhile; ?>

    <div class="cleaner">&nbsp;</div>

</div><!-- end #main -->

<?php get_footer(); ?>
4

2 回答 2

1

看起来问题是 IE8 被您的标记弄糊涂了。如果你启动开发者工具,你会看到你的 side 元素被注册为一个自动关闭的空元素 ( <aside />)。这意味着你想要在你的旁边的东西现在在你的旁边并且渗入页面。

在您身边的某个地方,可能有一些标记正在破坏 IE8 的标记解析器。我不能强调确保您的标记和 CSS 有效的重要性。查看以下网站,他们是您的朋友:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

于 2013-07-09T18:42:11.297 回答
1

您的问题是您使用的是 IE8 无法理解的现代 HTML5 元素。

<header>IE8 发布时类似和未发明的元素<aside>,默认情况下浏览器无法正常使用它们。当您使用 HTML5 元素时,您看到的效果是 IE8 中发生的典型事情。

幸运的是,有一个解决方案,形式为html5shiv。这是一个小的 Javascript hack,它修复了 IE8,以便它接受现代 HTML5 标记作为有效的 HTML。(它不会向浏览器添加任何额外的功能;它只是让标签<aside>在旧 IE 版本中工作)。

将此脚本添加到页面顶部(最好在特定于 IE8 的块中,这样它就不会被其他浏览器加载),页面应该会神奇地开始工作。

html5shiv 的替代品是著名的Modernizr 库。这包括 html5shiv 功能,还提供了额外的功能来帮助您让您的网站在旧浏览器中运行,而不会影响新功能。

最后一件事:我注意到尽管您的页面的 DOCTYPE 设置为 HTML5 文档类型,但您的页面还在<html>元素中包含对 xhtml 命名空间的引用。我不太确定您的页面为什么会这样做;我不认为它应该引起问题,但同样,它不是真正正确有效的代码。

希望有帮助。

于 2013-07-09T20:29:26.513 回答