Question

是否有人能够帮助解释为什么我们的firefox主页标题显示在页面右侧远远与Chrome相比？

www.volleyballusa.com

<div id="videoDiv-home">
<div id="videoBlock-home"><video id="video" width="320" height="240" 
preload="preload" autoplay="autoplay" loop="loop"><source 
src="https://www.volleyballusa.com/content/introOpt-transcode.mp4" 
type="video/mp4" /><object id="video" width="320" height="240" data="https://www.volleyballusa.com/javascript/tinymce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash"><param name="src" value="https://www.volleyballusa.com/javascript/tinymce/plugins/media/moxieplayer.swf" />
<param name="flashvars" value="url=/content/introOpt-transcode.mp4&amp;poster=/" /><param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" /></object> 
</video>

<div id="videoMessage-home">
    <h1 class="vidtitle">Buy American Made.</h1>
    <a class="big learnmore w-button" href="https://www.volleyballusa.com/court-
construction/">Proudly Manufacturing Volleyball Nets, Poles, Pads, Boundary 
Lines, Etc.</a>
</div>
</div>
</div>

Answer 1

我看到您正在使用Flexbox进行屏幕布局。它是CSS3的一个很好的补充，但它只支持新的浏览器。有关Flexbox的信息，请参阅list of supported browsers。这可能是格式问题的根源，而不是浏览器本身。

要支持适度较旧的浏览器，您需要使用供应商前缀。以下是适当的vendor prefixes for Flexbox。

display: -webkit-box; // for older versions of chrome/safari
display: -moz-box; // for older versions of firefox
display: -ms-flexbox; // for older versions of Internet Explorer
display: -webkit-flex; // for older versions of chrome/safari
display: flex; // for modern browsers

话虽如此，即使有供应商前缀，旧版浏览器也不支持flexbox。处理此问题的一种方法是使用回退CSS。这意味着设计CSS以便较新的浏览器将使用flexbox规范，但较旧的浏览器将使用替代规范。我没有亲自试过这个问题，但有些人似乎很幸运display:table为a good alternative。

如果您的网站在较旧的系统上渲染得非常重要，我建议您坚持使用更成熟的CSS。对于类似网格的布局，我建议使用bootstrap，特别是它的网格系统。它非常易于学习，并且在旧版浏览器甚至移动设备上都有出色的支持。话虽这么说，你的大多数用户可能会有足够新的浏览器来显示Flexbox，特别是有供应商前缀，因此可能没有必要重写整个代码库。

主页div定位故障排除

1 个答案: