css - Netscape 错误地呈现 float 共享栏

Question

我一直在尝试在我的网页上添加一个 float 的社交媒体分享栏。

该栏在 IE、Firefox、Opera、Chrome 和 Safari 中呈现完美，但在 Netscape Navigator 9 中查看时拒绝表现。

在上述所有情况下正确呈现栏很重要，我认为问题可能是由于我的网页上的其他内容干扰了它的正确操作。但是，当我使用我已在此处发布链接的模拟页面测试栏时，同样的问题仍然存在。

任何人都可以建议我可以对源代码进行哪些更改以解决此问题？

这是我的演示页面的链接。

http://www.corncreations.co.uk/test/floating_bar.html

这是创建者页面的链接，其中包含源代码。

http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html

非常感谢收到的任何建设性建议。

用于演示的代码可通过访问第二个链接(上方)获得，但无论如何，它就在这里:

<style type="text/css">
#floating_bar {
background-color:#fff;
position:fixed;
padding:0 0 3px 0;
bottom: 30%;
margin-left:-60px;
float:left;
border: 1px dotted #f7f7f7;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
z-index:10;
}

#floating_bar {
clear:both;
}
</style>
<div id='floating_bar'>
<div style='margin:10px 0 5px 13px;' id='like'>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div style='margin:0px 0 0 10px;' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>

<div style='margin:5px 5px 5px 6px;'>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="mybloggertriks" data-lang="en" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style='margin:5px 5px 5px 5px;' id='linkedin'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'></script>
<script data-counter='top' type='IN/Share'></script>
</div>
<div style='margin:0 0 10px 11px; id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#333;'> Get Widget</a></p>
</div>

至于我到目前为止研究和尝试过的东西 - 我已经阅读了这个论坛上的其他帖子，并且还用谷歌搜索了答案，但是除了阅读其他人在他们的 Facebook Like 按钮上有困难的一些帖子之外在 Netscape 中正确呈现，其他似乎无关紧要。我还没有尝试更改原始源代码，因为我不确定该怎么做才能解决问题。

Answer 1

1。向后兼容性有时会走得太远。

why Netscape fails to render the bar in the same way as all the other main browsers

您是在暗示 Netscape 是“主要浏览器”，就像您在问题中提到的浏览器一样。 Netscape 曾经有一个 significant市场份额，但它的时代已经过去了(参见维基百科上的 History of the web browser，特别是文章底部的时间线图；还有 Usage share of web browsers 的当前统计数据)。

从实际的 Angular 来看，这使问题变得无关紧要。考虑到您正在尝试支持旧版浏览器，很难证明这个问题的合理性，更不用说找到答案了。

但是让我们假设您有正当理由支持一个几乎已经绝迹的浏览器......

2。问题是什么？

"The bar ... refuses to behave"

您可能会说，“它不起作用”。 怎么它不起作用？ 预期的行为是什么，实际结果与您的预期有何偏差？您不应该指望我们下载一个十多年来几乎没有人使用过的浏览器来确认模棱两可的错误描述 (SSCCE)。

3。你的 HTML 很时髦

• 无格式 缺少缩进不是技术问题(只是吹毛求疵)，但会让人难以阅读
• 引号使用不一致 一般做法是使用双引号 "用于 HTML 属性。例如:<div id="floating_bar"> .
• **是!吗应该在 <script/> 中标签？
• <g:plusone/>不是有效的 HTML 标记。你是不是想做类似 this 的事情？ ？
• CSS 可能无法正常工作，因为 bottom属性设置为百分比。起初对底部/右侧的支持参差不齐，而且百分比可能不确定。