我想我通过标题对它进行了很多解释,但我会尝试更多地解释它。
我有一个我制作的 Wordpress 主题。它在 chrome 和 IE8 中运行良好,但是当我在 Firefox 上使用它时,'wrapper' div 中的所有内容都不会显示,并且 wrapper 中的所有内容(页脚和'top' div)都会显示。
这是我的模板页面之一,结构重新组合在一起:
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel='stylesheet' href='<?php bloginfo('stylesheet_url'); ?>' type='text/css' media='screen'/>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' type='image/x-icon' href='<?php bloginfo('template_url'); ?>/images/icon.ico' />
<?php wp_head(); ?>
</head>
<body>
<div id='top'></div>
<div id='wrapper'>
<div id='header'>
<div id='logo' class=''><p>Niagara Islamic School</p></div>
<ul id='navigation' class='f-right'>
<?php wp_list_pages('title_li='); ?>
<li><div id='nav-border'></div></li>
</ul>
</div>
<div id='pre-content' class=''>
<div id='introduction' class=''>
<h2>Introduction</h2>
<?php query_posts('category_name=Introduction'); if(have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endif; ?>
</div>
<div id='current' class=''>
<div id='slider' class=''><?php if ( function_exists( 'soliloquy_slider' ) ) soliloquy_slider( '61' );?></div>
</div>
</div>
<div id='content' class=''>
<div id='news' class=''>
<h2>News/ Updates</h2>
<?php query_posts('category_name=News'); if(have_posts()) : the_post(); ?>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<?php the_content(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
</div>
<div id='footer' class=''>
<div id='inside-footer' class=''>
<ul id='sitemap' class='footer-head'>
<li class='sidebar-head'><h4><?php _e('Navigation'); ?></h4></li>
<?php wp_list_pages('title_li='); ?>
</ul>
<ul id='quick-links' class='footer-head'>
<li class='sidebar-head'><h4><?php _e('Quick Links'); ?></h4></li>
<?php wp_get_linksbyname('Quick Links','orderby=name&show_description=0&show_updated=1') ?>
<li class=''><a href='#' class=''>Coming Soon</a></li>
<li class=''><a href='#' class=''>link here</a></li>
<li class=''><a href='#' class=''>link here</a></li>
<li class=''><a href='#' class=''>link here</a></li>
<li class=''><a href='#' class=''>link here</a></li>
<li class=''><a href='#' class=''>link here</a></li>
</ul>
<ul class='footer-head'>
<li class='sidebar-head'><h4><?php _e('Other Links'); ?></h4></li>
<?php wp_get_linksbyname('Other Links','orderby=name&show_description=0&show_updated=1') ?>
<li class=''><a href='#' class=''>Coming Soon</a></li>
<li class=''><a href='#' class=''>link here</a></li>
<li class=''><a href='#' class=''>link here</a></li>
<li class=''><a href='#' class=''>link here</a></li>
<li class=''><a href='#' class=''>link here</a></li>
<li class=''><a href='#' class=''>link here</a></li>
</ul>
<div id='right-footer'>
<a href='#top' id='back-up'>top ^</a>
</br>
</br>
</br>
<h4>Call us at:</h4>
<label class='phone'>905-295-4845</label></br>
<label class='phone'>905-295-0268</label>
</div>
</div>
</div>
<div id='footer-bottom'></div>
</body>
</html>
谢谢你。
编辑 CSS
#wrapper{
position: relative;width: 94%; margin: 0 auto; overflow: hidden;
}
#content{
width: 100%; min-height: 600px; float: left; padding: 0px;
}
#news{
width: 50%; min-height: 600px; margin: 0 15px 100px 0; padding: 15px; background: #FAFAFA;
} #news h2{text-transform: capitalize; color: #dd771c; text-decoration: underline;}
#news h5{
padding: 5px 0 5px 0;text-transform: capitalize; color: #dd771c;
}
#news p{
text-align: justify;} #news h4{padding-bottom: 50px; text-align: left;
}