Question

你好堆栈溢出的好朋友。我认为这是一个经验丰富的开发人员可以在几秒钟内解决的问题。我很无能为力，因为我是一名创建自己网站的电影制作人，虽然我感到非常自豪，我已经设法从头开始创建一个可行的wordpress模板。但是经过两周的工作，仍然存在一个问题：fu ***布局完全破坏了探险家，我无法识别出什么是错的，因为我没有使用任何奇怪的java或晦涩的css标签。有人可以帮帮我吗？如果有任何帮助，我会发布css和header.php。我感谢大家抽出时间帮助我。该网站适用于firefox，ipad和chrome。但f *** Explorer（IE6，IE7，IE8）已无法驯服。 http://estamosobservando.com/

的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 -->

Answer 1

您正在使用IE不支持的HTML5标记。

只需将<header>更改为<div id="header">（不要忘记更改结束标记）以及从header{到#header{的相应CSS规则。对nav，aside和footer执行相同操作。我在SuperPreview中尝试了结果，看起来很好。

编辑：我注意到你有不同的背景图片悬停，但它们没有出现。添加此行以使其工作：

#navbar a {display:block; width: 100%; height:100%;}

我的wordpress主题在Explorer中破解

1 个答案: