Internet explorer 我的wordpress主题在资源管理器中中断_Internet Explorer_Wordpress

Internet explorer 我的wordpress主题在资源管理器中中断

internet-explorer wordpress

Internet explorer 我的wordpress主题在资源管理器中中断,internet-explorer,wordpress,Internet Explorer,Wordpress,你好，堆栈溢出的好朋友。我认为这是一个任何有经验的开发人员都可以在几秒钟内解决的问题。我是一个制作自己网站的电影制作人，对此我相当无知，尽管我为自己能够从零开始创建一个可行的wordpress模板而感到自豪。但经过两周的工作，仍然存在一个问题：浏览器中的fu***布局完全中断，我无法识别出哪里出了问题，因为我没有使用任何奇怪的java或模糊的css标记。有人能帮我吗？如果有任何帮助，我会发布css和header.php。我感谢大家抽出时间来帮助我。该网站在firefox、ipad和chrome上

你好，堆栈溢出的好朋友。我认为这是一个任何有经验的开发人员都可以在几秒钟内解决的问题。我是一个制作自己网站的电影制作人，对此我相当无知，尽管我为自己能够从零开始创建一个可行的wordpress模板而感到自豪。但经过两周的工作，仍然存在一个问题：浏览器中的fu***布局完全中断，我无法识别出哪里出了问题，因为我没有使用任何奇怪的java或模糊的css标记。有人能帮我吗？如果有任何帮助，我会发布css和header.php。我感谢大家抽出时间来帮助我。该网站在firefox、ipad和chrome上运行良好。但f***Explorer（IE6、IE7、IE8）一直无法驯服。

style.css

@media screen {

* { margin: 0; padding: 0; }



article, aside, figure, footer, header, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */


body { font: 16px/1.4 Georgia, "Times New Roman", Times, serif; letter-spacing: -1px; color: #646464; }

/*
    TYPOGRAPHY
*/
h1 {font: 52px arvo, "Times New Roman", Times, serif; font-smooth: always; font-weight:bold; letter-spacing: -1px; color: #191919; }

h2 {font: 30px Terminal Dosis Light, Arial, Helvetica, sans-serif; font-smooth: always; letter-spacing: -1px; color: black; word-spacing:5px; }

h3 {font: 25px Terminal Dosis Light, Arial, Helvetica, sans-serif; font-smooth: always; letter-spacing: -1px; color: gray; }

h4 {font: 20px Terminal Dosis Light, Arial, Helvetica, sans-serif; font-smooth: always; color: gray; }

h5 {font: 16px Avro, "Times New Roman", Times, serif; font-smooth: always; font-weight:bold; color: #333333; }

h6 {font: 14px Terminal Dosis Light, Arial, Helvetica, sans-serif; font-smooth: always; letter-spacing: -1px; color: #ea005e; text-transform:uppercase; }

/*
    THE SITE
*/

a { text-decoration: none; color:inherit}

a:link a:visited, a:active { text-decoration: none; }

a:hover { text-decoration:underline; color: inherit; }

#page-wrap { width:1020px; margin: 0px auto; padding: 0px 0px 50px 0px; background: white; }

header { position: relative; top: 0px; left: 0px; width: 1020px; height:560px; padding: 0px 0px 50px 0px; margin: 0px 0px 0px 0px; }

#blackbar { position: absolute; top:0px; left: 0px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 1020px; height:30px; background-color: #1e1e1e; }

#blackbar ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#blackbar li { margin: 0px 0px 0px 0px; display: inline-block; text-decoration: none; padding: 0px 0px 0px 0px; }

#likeus h4 { position:absolute; top: 0px; left: 790px; }

#likeus h4:hover {color: #1ad4ff; }

nav { position: absolute; top:45px; left: 7px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 1020px; height: 520px; background-color: transparent; }

#navbar ul{ padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#navbar li { display: inline-block; padding: 0px 0px 0px 0px; }

#navbar ul li h2:hover { text-decoration:none; }

#home { position: absolute; width: 185px; height: 520px; top: 0px; left: 10px; padding: 0px 0px 0px 0px; background-image:url(images/home-off.jpg); background-repeat:no-repeat; }

#home a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/home-on.jpg); background-repeat:no-repeat; }

#home h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white; }

#pre { position: absolute; width: 185px; height: 520px; top: 0px; left: 205px; padding: 0px 0px 0px 0px; background-image:url(images/pre-off.jpg); background-repeat:no-repeat; }

#pre h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white;}

#pre a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/pre-on.jpg); background-repeat:no-repeat; }

#shoot  { position: absolute; width: 185px; height: 520px; top: 0px; left: 400px; padding: 0px 0px 0px 0px; background-image:url(images/shoot-off.jpg); background-repeat:no-repeat; }

#shoot h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white; }

#shoot a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/shoot-on.jpg); background-repeat:no-repeat; }

#post { position: absolute; width: 185px; height: 520px; top: 0px; left: 595px; padding: 0px 0px 0px 0px; background-image:url(images/post-off.jpg); background-repeat:no-repeat; }

#post h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white; }

#post a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/post-on.jpg); background-repeat:no-repeat; }

#news { position: absolute; width: 185px; height: 520px; top: 0px; left: 790px; padding: 0px 0px 0px 0px; background-image:url(images/news-off.jpg); background-repeat:no-repeat; }

#news h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white; }

#news a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/news-on.jpg); background-repeat:no-repeat; }



#maincontent { margin: 0px 0px 0px 0px; float: right; width:780px; padding: 0px 30px 0px 0px; background-color:white; }

aside { margin: 0px 0px 0px 0px; float: left; width: 200px; padding: 0px 0px 0px 0px; background-color:white; }

#widget { padding: 133px 0px 0px 20px; text-align:left; }

#widget ul {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image: none; text-decoration: none;}

#widget li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image: none; text-decoration: none; }


footer { position:relative; width: 1020px; height: 300px; margin: 0px auto; padding: 0px 0px 0px 0px; background-color: #1e1e1e; }

#logo { position: absolute; width: 221px; height: 222px; top: 20px; left: 20px; padding: 0px 0px 0px 0px; background-image:url(images/logo.png); background-repeat:no-repeat;  }

#twittertitle { position: absolute; top: 15px; left: 270px; padding: 0px 0px 0px 0px; }

#twitterbox { position: absolute; top: 50px; left: 270px; padding: 0px 0px 0px 0px; background-image:url(images/twitterbox.png); background-repeat:no-repeat; width: 540px; height: 190px; }

#twinfo { position: absolute; top: 0px; left: 0px; padding: 30px 20px 5px 20px; background:none; width: 500px; height: 190px; }

#twitter_update_list {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image: none; text-decoration: none; }

#twitter_update_list a { color: black}

#sociallist { position: absolute; top: 50px; left: 837px; padding: 0px 0px 0px 0px; background-color:#282828; width: 140px; height: 190px; }

#sociallist ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#sociallist li { margin: 0px 0px 0px 0px; text-decoration: none; padding: 0px 0px 0px 0px; }

#sociallist li h3:hover {color: #1ad4ff; }

#facebooklogo { position: absolute; background-position: center; background-image: url(images/facebooklogo.png); background-repeat:no-repeat; width: 26px; height: 26px; top: 18px; right: 10px; }

#facebooklogo h3 { position: absolute; top: 0px; right: 42px; }

#twitterlogo { background-position: center; background-image: url(images/twitterlogo.png); background-repeat:no-repeat; width: 33px; height: 25px; position: absolute; top: 48px; right: 10px; }

#twitterlogo h3 { position: absolute; top: 0px; right: 42px; }

#flickrlogo { background-position: center; background-image: url(images/flickrlogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position: absolute; top: 78px; right: 10px; }

#flickrlogo h3 { position: absolute; top: 0px; right: 42px; }

#vimeologo { background-position: center; background-image: url(images/vimeologo.png); background-repeat:no-repeat; width: 27px; height: 24px; position: absolute; top: 108px; right: 10px; }

#vimeologo h3 { position: absolute; top: 0px; right: 42px; }

#youtubelogo { background-position: center; background-image: url(images/youtubelogo.png); background-repeat:no-repeat; width: 24px; height: 29px; position: absolute; top: 138px; right: 10px; }

#youtubelogo h3 { position: absolute; top: 0px; right: 42px; }

#disclaimer { position: absolute; bottom: 0px; left: 0px; margin: 0px auto; padding: 0px 0px 0px 17px; text-align: left; font-size: 10px; word-spacing: 3px; }

以及header.php：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>" />

    <?php if (is_search()) { ?>
       <meta name="robots" content="noindex, nofollow" /> 
    <?php } ?>

    <title>
           <?php
              if (function_exists('is_tag') && is_tag()) {
                 single_tag_title("Tag Archive for &quot;"); echo '&quot; - '; }
              elseif (is_archive()) {
                 wp_title(''); echo ' Archive - '; }
              elseif (is_search()) {
                 echo 'Search for &quot;'.wp_specialchars($s).'&quot; - '; }
              elseif (!(is_404()) && (is_single()) || (is_page())) {
                 wp_title(''); echo ' - '; }
              elseif (is_404()) {
                 echo 'Not Found - '; }
              if (is_home()) {
                 bloginfo('name'); echo ' - '; bloginfo('description'); }
              else {
                  bloginfo('name'); }
              if ($paged>1) {
                 echo ' - page '. $paged; }
           ?>
    </title>

    <link rel="shortcut icon" href="/favicon.ico">

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

    <?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>

    <?php wp_head(); ?>
</head>

<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'>

<body <?php body_class(); ?>>

    <div id="page-wrap" class="group">

        <header>
            <div id="blackbar">
                <ul>
                <li><div id="likeus"><a href="#"><h4>Like us on Facebook!</h4></a></div></li>
                </ul>
            </div> <!-- Fin del blackbar --> 

            <nav>
                <div id="navbar">

                    <ul>

                    <li><div id="home"><a href="<?php echo get_option('home'); ?>/"><h2>Home</h2></a></div></li>

                    <li><div id="pre"><a href="http://estamosobservando.com/category/preproduction/"><h2>Preproduction</h2></a></div></li>

                    <li><div id="shoot"><a href="http://estamosobservando.com/category/the-shoot/"><h2>The Shoot</h2></a></div></li>

                    <li><div id="post"><a href="http://estamosobservando.com/category/postproduction/"><h2>Postproduction</h2></a></div></li>

                    <li><div id="news"><a href="#"><h2>News</h2></a></div></li>

                    </ul> 

                    </div> <!-- Fin del navbar -->                                                                

            </nav>

        </header> <!-- fin del header -->


您正在使用IE不支持的HTML5标记
只需将
更改为
（不要忘记也更改结束标记），并将相应的CSS规则从标题{
更改为#标题{
。对导航
、旁白
和页脚
执行相同的操作。我在SuperPreview中尝试了该结果，结果看起来不错
编辑：我注意到您有不同的悬停背景图像，但它们没有出现。添加此行以使其正常工作：
#navbar a {display:block; width: 100%; height:100%;}

您正在使用IE不支持的HTML5标记
只需将
更改为
（不要忘记也更改结束标记），并将相应的CSS规则从标题{
更改为#标题{
。对导航
、旁白
和页脚
执行相同的操作。我在SuperPreview中尝试了该结果，结果看起来不错
编辑：我注意到您有不同的悬停背景图像，但它们没有出现。添加此行以使其正常工作：
#navbar a {display:block; width: 100%; height:100%;}