css - IE 8 背景颜色不稳定

Question

我的网站 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(); ?>

Answer 1

问题似乎是 IE8 对您的标记感到困惑。如果启动开发者工具，您会看到 aside 元素被注册为一个自关闭的空元素 ( <aside /> )。这意味着您想要放在旁边的内容现在位于您的旁边并渗透到页面中。

在您旁边的某个地方，可能有一些标记正在使 IE8 的标记解析器变得乏味。我无法强调确保您的标记和 CSS 验证的重要性。查看以下网站，他们是您的 friend :

http://validator.w3.org/

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