0

私のウェブサイト HeelsFirstTravel.com では、誰かが IE 8 でのみ個々の投稿を表示すると問題が発生します。

投稿の右上にあるホット ピンクのボックス ( http://www.heelsfirsttravel.com/2013/07/09/another-reason-to-go-to-vegas-bacon-edition/ ) が全体ににじみ出ています。 IE 8 のみの背景。

背景を積極的に白に設定してみましたが、違いはありません。

ボックスを維持しながら、この1つのブラウザで修正する方法はありますか?

編集: ユーザーは、これはほんの数日前に始まったと主張しており、さらに頭を悩ませています. 本当に何も変わっていません！

ありがとう！

-ジャンヌ

<?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 が理解できない最新の HTML5 要素を使用していることです。

<header>やのような要素は<aside>、IE8 がリリースされたときに発明されたものではなく、ブラウザはデフォルトでは適切に動作しません。表示されている効果は、HTML5 要素を使用したときに IE8 で発生する典型的なものです。

幸いなことに、html5shivの形式で解決策があります。これは、最新の HTML5 タグを有効な HTML として受け入れるように IE8 を修正する小さな Javascript ハックです。(ブラウザに特別な機能を追加するわけではありません<aside>。古い IE バージョンで動作するようなタグを作成するだけです)。

このスクリプトをページの一番上 (できれば IE8 固有のブロックに追加して、他のブラウザーによって読み込まれないようにします) に追加すると、ページが魔法のように機能し始めます。

html5shiv に代わるものとして、よく知られているModernizr ライブラリがあります。これには html5shiv 機能が含まれますが、新しい機能に妥協することなく古いブラウザーでサイトを機能させるための追加機能も提供します。

最後に、あなたのページの DOCTYPE は HTML5 doctype に設定されていますが、ページの<html>要素には xhtml 名前空間への参照も含まれています。あなたのページがこれを行う理由はよくわかりません。問題が発生することはないと思いますが、同様に、実際には適切に有効なコードではありません。

それが役立つことを願っています。

于 2013-07-09T20:29:26.513 に答える