Question

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

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

我已尝试将背景设置为白色，但这没有任何区别。

任何想法如何在保留盒子的同时在这个浏览器中修复？

编辑：用户坚持认为这只是几天前开始的，这让我更加头疼。什么都没有改变！

谢谢！

-Jeanne

<?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(); ?>

Answer 1

看起来问题是IE8让你的标记感到困惑。如果您启动开发人员工具，您将看到您的旁边元素被注册为自动关闭的空元素（<aside />）。这意味着你想要放在你旁边的东西现在在你的旁边并流入页面。

在你的某个地方，可能有一些标记是IE8的标记解析器。我不能强调确保标记和CSS验证的重要性。看看以下网站，他们是你的朋友：

http://validator.w3.org/

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

Answer 2

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

IE8发布后，<header>和<aside>等元素并未发明，默认情况下浏览器无法正常使用。当您使用HTML5元素时，您所看到的效果是IE8中发生的典型效果。

幸运的是，有一种解决方案，形式为html5shiv。这是一个小的Javascript黑客，修复IE8，使其接受现代HTML5标签作为有效的HTML。（它不会向浏览器添加任何额外的功能;它只会使像<aside>这样的标签在旧的IE版本中工作。）

将此脚本添加到页面顶部（最好是在IE8特定的块中，以免其他浏览器加载），页面应该神奇地开始工作。

html5shiv的替代品是众所周知的Modernizr library。这包括html5shiv功能，但还提供了其他功能，可帮助您使您的网站在旧浏览器中运行，而不会影响新功能。

最后一件事：我注意到虽然您的页面的DOCTYPE设置为HTML5文档类型，但您的页面还包含<html>元素中对xhtml命名空间的引用。我不太清楚为什么你的页面会这样做;我不认为这会导致问题，但同样地，它并不是真正有效的代码。

希望有所帮助。

IE 8背景颜色无穷

2 个答案: