-1

在 Firefox 中，我的网站超出了页面边界。

这是它在 Firefox 上的截图…… http://www.anthonysabilities.com/firefox-screenshot.jpg

这就是它在所有其他浏览器上的样子。 http://www.anthonysabilities.com/safari-screenshot.jpg

如您所见，它在页面下方延伸得很远，并且存在溢出窗口的问题。我希望访问者不必滚动窗口本身，只需滚动表中的可滚动 div。

这是我主页的代码：

    <?php

/*
 * @template  Mystique
 * @revised   October 30, 2011
 * @author    digitalnature, http://digitalnature.eu
 * @license   GPL, http://www.opensource.org/licenses/gpl-license
 */

// The home or blog page template.
// By default, the newest posts are listed here.

?><?php atom()->template('header'); ?><div style="width:100%;height:100%;overflow:hidden;"><div align="center"><img src="http://www.anthonysabilities.com/pictures-blog/background.jpg" class="bg" width="100%" height="100%" alt="" /></div>
<table style="width:59.5238095238095%;max-height:1010px;align:center;margin-top:1%;margin-left:auto;margin-right:auto;height:94.6478873239437%;border-collapse: collapse;">
<tr>
                <td rowspan="4" style="width:1.875%;height:97.7678571428571%;vertical-align:top;overflow:hidden;margin:0;padding:0;min-width:15px;"><img src="http://www.anthonysabilities.com/pictures-blog/blogconsole-far-left.png" style="display:block;margin:0;padding:0;" width="100%" height="100%" alt="" /></td>
        <td colspan="3" style="height:2.22321418571429%;width:96.25%;overflow:hidden;margin-top:0px;padding-top:0px;margin-bottom:0px;padding-bottom:0px;max-height:25px;"><img src="http://www.anthonysabilities.com/pictures-blog/blogconsole-top.png" style="display:block;margin:0;padding:0;max-height:25px;" width="100%" height="100%" alt="" /></td>
                <td rowspan="4" style="width:1.875%;height:97.7678571428571%;vertical-align:top;overflow:hidden;margin:0;padding:0;min-width:15px;"><img src="http://www.anthonysabilities.com/pictures-blog/blogconsole-far-right.png" style="display:block;margin:0;padding:0;" width="100%" height="100%" alt="" /></td>
      </tr>
              <tr>
                <td rowspan="3" style="width:18.75%;height:95.5357142857143%;background-image: url('http://www.anthonysabilities.com/pictures-blog/menubg.png');vertical-align:top;margin:0;padding:0;min-width:150px;"><div style="width:100%;height:100%;overflow:hidden;"><?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('Menu') ) : ?>
                <?php endif; ?></div></td>
                <td rowspan="3" style="width:1.875%;height:95.5357142857143%;vertical-align:top;margin:0;padding:0;min-width:15px;"><img src="http://www.anthonysabilities.com/pictures-blog/blogconsole-center.png" onload="blinklink()" onunload="stoptimer()" style="display:block;margin:0;padding:0;" width="100%" height="100%" alt="" /></td>
                <td style="height:11.9047619047619%;width:75.625%;margin:0;padding:0;"><a href="http://www.anthonysabilities.com/blog/"><img src="http://www.anthonysabilities.com/pictures-blog/optimistguide-blog-title.jpg" style="display:block;margin:0;padding:0;" width="100%" alt="" /></a></td>
              </tr>
              <tr>
                <td style="height:1.875%;width:75.625%;margin:0;padding:0;vertical-align:top;"><img src="http://www.anthonysabilities.com/pictures-blog/blogconsole-divider.png" style="display:block;margin:0;padding:0;" width="100%" height="100%" alt="" /></td>
              </tr>
              <tr>
                <td style="padding:0;width:75.625%;height:78.8690476190476%;min-width:605px;" id="post-td">
<div style="left:0;top:0;height:100%;width:100%;overflow-y:scroll;overflow-x:hidden;background-image:url('http://www.anthonysabilities.com/pictures-blog/post-bg.jpg');" id="scrollTest" tabindex="1">
      <div id="primary-content" style="padding-bottom:0px;padding-left:5px;margin-top:-25px;">
        <div class="blocks clear-block">

          <?php atom()->action('before_primary'); ?><div class="ab-player" style="margin-bottom:-10px;" data-boourl="http://audioboo.fm/boos/806589-about-the-optimist-s-guide-to-life/embed"><a href="http://audioboo.fm/boos/806589-about-the-optimist-s-guide-to-life">listen to &lsquo;About The Optimist's Guide to Life&rsquo; on Audioboo</a></div><script type="text/javascript">(function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "http://d15mj6e6qmt1na.cloudfront.net/assets/embed.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })();</script>

<table width="96.6101694915254%" height="41.5094339622642%" style="align:center;margin-left:auto;margin-right:auto;background-color:#000;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;"><tr><td width="33.33%" height="100%" style="background-color:#bce4ff;border:1px solid #FFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;overflow:hidden;min-width:190px;min-height:220px;"><div style="margin-left:-2px;margin-bottom:-20px;"><?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('Subscribe') ) : ?>
                <?php endif; ?></div></td>

<td width="33.33%" height="100%" style="background-color:#000;border:2px solid #72ccff;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;overflow:hidden;min-width:190px;min-height:220px;text-align:center;color:#FFF;"><img src="http://www.anthonysabilities.com/pictures-blog/themesong.jpg" width="78.9473684210526%"><audio controls="controls" style="width:90%;height:7.2727272727273%;">
  <source src="http://www.anthonysabilities.com/pictures-blog/DO-ME-A-FAVOR_final-blog.ogg" type="audio/ogg" />
  <source src="http://www.anthonysabilities.com/pictures-blog/DO-ME-A-FAVOR_final-blog.mp3" type="audio/mp3" />
  Your browser does not support the audio tag.
</audio>
<p style="margin-top:0px;margin-bottom:0px;">(sung by <a href="http://www.facebook.com/nalanisarinamusic">Nalani & Sarina</a>)</p><a href="http://www.anthonysabilities.com/blog/yas/"><img src="http://www.anthonysabilities.com/pictures-blog/youarestrongerbutton.jpg" width="78.9473684210526%" style="border: 1px solid #FFF;"></a></td>

<td width="33.34%" height="100%" style="background-color:#bce4ff;border:1px solid #FFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;overflow:hidden;min-width:190px;min-height:220px;text-align:center;"><a href="http://www.anthonysabilities.com/blog/writer-login/#register"><img src="http://www.anthonysabilities.com/pictures-blog/writeformyblog.png" width="89.4736842105263%"></a><a href="http://www.anthonysabilities.com/blog/writer-login/#login"><img src="http://www.anthonysabilities.com/pictures-blog/loginbutton.jpg" width="89.4736842105263%"></a></td></tr></table>

          <?php if(have_posts()): ?>
          <div class="posts clear-block">
<?php while(have_posts()) atom()->template('teaser'); ?>
          </div>

          <?php atom()->pagination(); ?>

          <?php endif; ?>

          <?php atom()->action('after_primary'); ?>

        </div>
      </div>
    </td>
              </tr>
              <tr>
                <td colspan="5" style="width:100%;height:2.22321428571429%;background-image: url('http://www.anthonysabilities.com/pictures-blog/post-bg.jpg');margin:0;padding:0;"><img src="http://www.anthonysabilities.com/pictures-blog/blogconsole-bottom.png" style="display:block;margin:0;padding:0;" width="100%" height="100%" alt="" /></td></tr></table></div><?php atom()->template('footer'); ?>

我在头文件中也有这个：

<style type="text/css">
 body {width:100%; height:100%; overflow: hidden; overflow: -moz-scrollbars-vertical; padding:0; margin:0; border:0;font-size:80%}
 html {width:100%; height:100%; overflow:hidden;}

  body.extraWide {font-size:115%;}
  body.wide {font-size:95%;}

*>#post-td {max-height:530px;}
*>#scrollTest {max-height:530px;}
</style>

任何有助于使我的网站在 Firefox 中与 Safari 和任何其他浏览器中看起来相同的帮助将不胜感激。谢谢！:)

4

1 回答 1

0

这种情况发生在 Firefox 而不是其他浏览器的原因是您在影响滚动的 css 中使用了 Mozilla 供应商前缀 -moz。

尝试删除它。

于 2012-07-02T14:29:39.633 回答