2

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

该栏在 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 按钮无法正确呈现网景，似乎没有其他相关。我还没有尝试更改原始源代码，因为我不确定该怎么做才能解决问题。

4

1 回答 1

7

1. 向后兼容性有点过头了。

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

您是在暗示 Netscape 是一个“主浏览器”，就像您在问题中提到的浏览器一样。Netscape 曾经拥有重要的市场份额，但它的时代已经过去（参见Wikipedia上的网络浏览器历史，特别是文章底部的时间线图；还有网络浏览器的使用份额以获取当前统计数据）。

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

但是让我们假设您有充分的理由支持几乎已经灭绝的浏览器......

2. 有什么问题？

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

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

3. 你的 HTML 很时髦

  • 没有格式没有缩进不是技术问题（只是一个挑剔），但很难阅读
  • 引号的使用不一致通常的做法是"对 HTML 属性使用双引号。例如：<div id="floating_bar">。
  • **这!应该在<script/>标签中吗？
  • <g:plusone/>不是有效的 HTML 标记。你试图做这样的事情吗？
  • CSS 可能不起作用，因为该bottom属性设置为百分比。起初对底部/右侧的支持相当参差不齐，而且百分比可能不确定。
于 2013-11-01T08:37:24.653 回答