Question

我一直在尝试向我的网页添加一个浮动的社交媒体共享栏。

该栏在I.E，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>

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

Answer 1

1。向后兼容性太过分了。

为什么Netscape无法以与所有其他主浏览器相同的方式呈现条形

你暗示Netscape是一个“主浏览器”，就像你在问题中提到的浏览器一样。 Netscape曾经拥有significant市场份额，但它的时间已过去（请参阅维基百科上的History of the web browser，特别是文章底部的时间表图表;当前统计数据也是Usage share of web browsers。

从实际角度来看，这个问题无关紧要。鉴于您尝试支持旧版浏览器，很难证明这个问题的合理性，更不用说找到答案了。

但我们假设您有正当理由支持几乎绝迹的浏览器......

2。有什么问题？

“酒吧......拒绝表现”

你不妨说，“它不起作用”。如何不起作用？什么是预期行为，实际结果如何偏离您的预期？您不应该指望我们下载几十年来几乎没有人用过的浏览器来确认模糊的错误描述（SSCCE）。

3。你的HTML很时髦

没有格式化缺少缩进不是技术问题（只是挑剔），但却难以阅读
报价使用不一致一般做法是对HTML属性使用双引号"。例如：<div id="floating_bar">。
** !代码中是否应该<script/>？
<g:plusone/>不是有效的HTML代码。您是否尝试执行this？
CSS可能无法正常工作，因为bottom属性设置为百分比。对于底部/右部的支持起初非常不稳定，百分比可能是不确定的。

Netscape错误地呈现浮动共享栏

1 个答案:

1。向后兼容性太过分了。

2。有什么问题？

3。你的HTML很时髦