更改display：none to display：block显示不同浏览器的不一致行为

时间：2014-06-05 19:27:20

标签： jquery css facebook iframe toggle

我有一个珠宝画廊页面，其中有几个缩略图图像链接到在链接的CSS中使用display:none隐藏的单独div。每个隐藏的div都有一个更大的珠宝图像，一些文本，加上Facebook Like按钮和Twitter Tweet按钮。

我最初使用visibility:hidden并切换到visibility:visible，但隐藏的div上的Facebook按钮显示通过 - 我相信Facebook提供的javascript（使用Facebook的部分编码）喜欢按钮？）。隐藏图层上的FB按钮显示在可见图层中的内容之上。

我还尝试使用不透明度隐藏图层，直到用户点击缩略图为止。到目前为止，display:block技术效果最好。

现在，页面加载了第1个缩略图的div，display:block内联显示了该缩略图。单击另一个缩略图会触发一个jQuery函数，该函数将关联的div切换为display:block。我在这里找到了jQuery函数：https://stackoverflow.com/a/4261534/3712201

在Mac OS和Windows 7上，所有功能都适用于Safari和Chrome.在IE 11上，Facebook和Twitter按钮适用于页面上的初始项目，但Facebook按钮不会显示其他div。

Firefox的行为在Mac OS和Win上都是混合的。加载初始项目的div工作，但Facebook按钮在约35秒后消失。在单击缩略图显示的div上，Twitter按钮无法点击，直到Facebook按钮拉出其消失的行为。

HTML 

<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Handmade Earrings</title>
<link href="test_styles_stack.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper"> 
  <script language="JavaScript">
$(document).ready(function(){
  $(".gridRow a").click(function(event){
    event.preventDefault();
  });
});
</script> 
  <script type="text/javascript">
function toggleVisibility(newSection) {
        $(".grid_bigImage").not("#" + newSection).hide();
        $("#" + newSection).show();
    }</script>
  <div id="fb-root"></div>
  <script language="JavaScript">(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  <div class="bigImage_wrapper">
    <div class="grid_bigImage" id="ear1" style="display:block"><img src="images/bEar_RubyPearlWireWrap.jpg" width="620" height="355" alt=""/>
      <p>RUBY AND SWAROVSKI PEARL CLUSTER EARRINGS</p>
      <ul>
        <li>&#8226; Glass Ruby beads wrapped on Gold filled wire around a 10mm Swarovski Pearl</li>
        <li>&#8226; Gold Filled hand forged ear wires</li>
        <li>&#8226; Measures approximately 1 1/2" in length from top of ear wire</li>
      </ul>
      <div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike1" data-href="http://webkazoo.com/test/earrings.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings.html" data-text="Check out the Ruby & Swarovski Pearl Cluster Earrings" data-count="none">Tweet</a> 
      <script language="JavaScript">!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 class="grid_bigImage" id="ear2"><img src="images/bEar_MintChalcedonyHematite.jpg" width="514" height="620" alt=""/>
      <p>MINT CHALCEDONY HEMATITE CLUSTER EARRINGS</p>
      <ul>
        <li>&#8226; Mint Chalcedony measure 1 2/16"</li>
        <li>&#8226; 3mm faceted Hematite wire wrapped stones (14K Gold Filled)</li>
      </ul>
      <div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike2" data-href="http://webkazoo.com/test/earrings2.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings2.html" data-text="Check out the Mint Chalcedony Hematitle Cluster Earrings" data-count="none">Tweet</a> 
      <script language="JavaScript">!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 class="grid_bigImage" id="ear3"><img src="images/bEar_FacetGemstoneBriolette.jpg" width="566" height="620" alt=""/>
      <p>FACETED GEMSTONE BRIOLETTE EARRINGS WITH MIXED WRAPPED STONES</p>
      <ul>
        <li>&#8226; Faceted Briolette Gemstones measureing 1/2"</li>
        <li>&#8226; 3mm faceted mixed wire wrapped stones (sterling silver)</li>
      </ul>
      <div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike3" data-href="http://webkazoo.com/test/earrings3.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings3.html" data-text="Check out the Faceted Gemstone Briolette Earrings" data-count="none">Tweet</a> 
      <script language="JavaScript">!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>
  <div class="insideContent">
    <div class="gridWrapper">
      <h1>EARRINGS</h1>
      <div class="gridRow"><a href="#" onClick="toggleVisibility('ear1');"><img src="images/sEar_RubyPearlWireWrap.jpg" alt="" width="80" height="80" class="gridRow_item" id="thumb1"/></a><a href="#" onClick="toggleVisibility('ear2');"><img src="images/sEar_MintChalcedonyHematite.jpg" alt="" width="80" height="80" class="gridRow_item" id="thumb2"/></a><a href="#" onClick="toggleVisibility('ear3');"><img src="images/sEar_FacetGemstoneBriolette.jpg" alt="" width="80" height="80" class="gridRow_itemLast" id="thumb3"/></a></div>
    </div>
  </div>
</div>
</body>
</html>

CSS 

     body {
    margin: 0;
    border: 0;
    padding-bottom:50px;
}
#wrapper {
    width: 1000px;
    position: relative;
    margin:0 auto;
    top:0;
    background-color:#daf5f3;
}
h1 {
    position:relative;
    top:0;
    left:0;
    margin-top:0;
    padding-top:0;
    font-family:"copperplate_fsregular", Palatino, "Trebuchet MS", sans-serif;
    font-size:14px;
    font-weight:bold;
    line-height:18px;
    letter-spacing:2px;
}
img {
    border:0;
}
.insideContent {
    position: relative;
    width: 920px;
    margin: 0 auto;
    padding:20px 40px 0 40px;
}
.gridWrapper {
    position:relative;
    width:260px;
    min-height:720px;
    padding-right:40px;
    left:0;
    top:0;
}
.gridWrapper p {
    position:relative;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
    text-align:left;
}
.gridRow {
    position:relative;
    width:260px;
    height:80px;
    margin-bottom:15px;
}
.gridRow_item {
    float:left;
    width:80px;
    margin-right:10px;
}
.gridRow_itemLast {
    float:left;
    width:80px;
    margin-right:0;
}
.bigImage_wrapper { 
    position:relative;
    width:620px;
}
.grid_bigImage {
    position:absolute;
    width:620px;
    height:620px;
    top:20px;
    left:340px;
    display:none;
    background-color:#daf5f3;
    z-index:2;
}
.grid_bigImage p, ul, li {
    position:relative;
    width:560px;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}
.grid_bigImage p, ul {
    left:0;
    margin:7px 0 0 0;
    padding:0;
}
.grid_bigImage li {
    display:inline;
    margin-left:0;
}

此处的测试页：http://webkazoo.com/test/test_earrings_stack.html

在此先感谢我的第一个问题。

1 个答案:

答案 0 :(得分：0)

此问题的解决方案原来是使用Facebook按钮代码的iFrame版本，而不是使用Facebook SDK.js的HTML5版本。这是另一位远离董事会的开发人员所建议的。

我将离开测试页面，该页面使用HTML5 Facebook编码。

回顾：在Windows 7上使用IE11不起作用。它在Firefox Windows上“有效”，但Facebook按钮在大约45秒后消失在第2和第3项上。适用于Win和Mac OS上的其他浏览器。

相关问题
最新问题