1. ホーム
  2. 質問と答え
  3. 私のワードプレスのテーマは、エクスプローラで壊れます

私のワードプレスのテーマは、エクスプローラで壊れます

2011-06-18 12 views
1

こんにちは、良いお友達のスタックオーバーフロー。これは、経験豊かな開発者が数秒で解決できる問題だと私は思う。私は自分自身のウェブサイトを作っている映画監督としてかなり無知ですが、私は実用的なwordpressテンプレートを最初から作成することができて誇りに思っています。しかし、2週間の作業後にはまだ問題が残っています.Fu ***のレイアウトはエクスプローラで完全に壊れてしまいます。私は奇妙なJavaやあいまいなCSSタグを使用していないため、何が間違っているのかを特定できません。誰か助けてくれますか？何か助けがあれば、私はcssとheader.phpを投稿します。私は時間をかけて私を助けてくれてありがとう。このサイトは、firefox、ipad、およびchromeでうまく動作します。しかし、F ***エクスプローラ（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の：あなたがIEでサポートされていないHTML5のタグを使用している

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

出典

2011-06-18 Benjamin

答えて

1

。

<header>〜<div id="header">（閉じるタグも変更することを忘れないでください）と対応するCSSルールをheader{〜#header{に変更してください。 nav,aside、footerについても同じ操作を行います。私はSuperPreviewで結果を試してみました。

編集：私は、あなたがホバーのために異なる背景画像を持っていることに気付きましたが、表示されません。この行を追加して問題なく動作させる：

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

出典

2011-06-18 16:28:02

関連する問題

 関連する問題