Firefox和Opera浏览器出现奇怪的CSS问题

-2

我为我的网站创建了共享按钮，但它在Firefox和Opera上看起来有点搞砸。尽管在Chrome甚至IE上看起来都不错。这里是什么样子：Firefox和Opera浏览器出现奇怪的CSS问题

enter image description here

如果你使用Firefox或Opera，你可以看到它住在这里：gdgtarena.com/2014/09/27/smartthings/

这里在CSS：

/* 
* Share It! Edit the CSS as you want :) 
*/ 

@media all { 

    .si-button{ 
     position: relative; 
     display: inline-block; 
     overflow: hidden; 
     padding: 4px 12px; 
     text-align: center; 
     text-transform: uppercase; 
     white-space: nowrap; 
     font-family: 'Roboto Condensed',sans-serif; 
     font-weight: 300; 
     font-size: 14px; 
     line-height: 24px; 
     color: #fff; 
     background-color: #2878c8; 
     cursor: pointer; 
     user-select: none; 
     transition: all .4s ease-in-out; 
     text-decoration: none !important; 
    } 

    .si-share-button, .si-share-counter { 
     display: inline-block; 
     white-space: nowrap;  
     line-height: 16px; 
    } 

    .si-share-counter { 
     margin: -4px -12px; 
     padding: 8px; 
     font-weight: 300; 
     background-color: rgba(0,0,0,.15); 

    } 

    .si-share-text { 
     padding-left: 20px; 
     text-align: center; !important; 
     float: left; 
     margin: 0px !important; 
    } 

    .si-button-facebook{ 
     color: #fff; 
     background-color: #3b5998; 
     border-color: #3b5998; 
    } 

    .si-button-facebook:hover{ 
     background-color: #2d4373; 
     border-color: #2d4373; 
    } 

    .si-button-twitter{ 
     color: #fff; 
     background-color: #55acee; 
     border-color: #55acee; 
    } 

    .si-button-twitter:hover{ 
     background-color: #2878B5; 
     border-color: #2878B5; 
    } 

    .si-button-gplus{ 
     color: #fff; 
     background-color: #dd4b39; 
     border-color: #dd4b39; 
    } 

    .si-button-gplus:hover{ 
     background-color: #C23321; 
     border-color: #C23321; 
    } 

    .si-button-reddit{ 
     color: #fff; 
     background-color: #F05E29; 
     border-color: #F05E29; 
    } 

    .si-button-reddit:hover{ 
     background-color: #D3400B; 
     border-color: #D3400B; 
    } 

    .si-button-pocket{ 
     color: #fff; 
     background-color: #EB5252; 
     border-color: #EB5252; 
    } 

    .si-button-pocket:hover{ 
     background-color: #CC4242; 
     border-color: #CC4242; 
    } 

    .si-button-linkedin{ 
     color: #fff; 
     background-color: #0e76a8; 
     border-color: #0e76a8; 
    } 

    .si-button-linkedin:hover{ 
     background-color: #075376; 
     border-color: #075376; 
    } 

    .si-button-pinterest{ 
     color: #fff; 
     background-color: #cb2028; 
     border-color: #cb2028; 
    } 

    .si-button-pinterest:hover{ 
     background-color: #9A151C; 
     border-color: #9A151C; 
    } 

    .si-icon{ 
     width: 16px; 
     height: 16px; 
     display: inline-block; 
     font-size: 40px; 
     margin-right: 8px; 
     vertical-align: top; 
    } 

    .si-box-share{ 
     float: left; 
     width: 100%; 
     margin-right: 5px; 
    } 

    .shareit{ 
     float: left !important; 
     overflow: hidden !important; 
    } 

    .shareit-small{ 
     text-align: center !important; 
     overflow: hidden !important; 
    } 

    .si-share-box{ 
     margin-bottom: 2%!important; 
     margin-top: 5px; 
     text-decoration: none !important; 
    } 

    .si-share-box a{ 
     text-decoration: none !important; 
    } 

} 

@media screen and (min-width: 10px) and (max-width: 299px){ 

    .si-button-linkedin, .si-button-pinterest{ 
     display: none; 
    } 


} 

@media screen and (min-width: 299px) and (max-width: 480px){ 

    .si-share-text{ 
     display: none; 
    } 

    .si-share-counter{ 
     display: none; 
    } 

    .si-icon{ 
     display: inline; 
    } 

    .shareit{ 
     top: .3em; 
     text-align: center; 
     float: none !important; 
    } 

    .si-button-linkedin, .si-button-pinterest{ 
     display: none; 
    } 




} 

@media screen and (min-width: 481px) and (max-width: 786px){ 
    .si-share-text{ 
     display: none; 
    } 

    .si-share-counter{ 
     display: none; 
    } 

    .si-icon{ 
     display: inline; 
    } 

    .shareit{ 
     top: .3em; 
     text-align: center; 
     float: none !important; 
    } 

    .si-button{ 
     width: 8%; 
    } 

} 

@media screen and (min-width: 787px) and (max-width: 1200px){ 

    .si-share-text{ 
     display: none; 
    } 

    .si-share-counter{ 
     display: none; 
    } 

    .si-icon{ 
     display: inline; 
    } 

    .shareit{ 
     top: .3em; 
     text-align: center; 
     float: none !important; 
    } 

    .si-button{ 
     width: 8%; 
    } 

} 

@media screen and (min-width: 1200px) and (max-width: 4200px){ 
    .si-button-reddit, .si-button-pocket{ 
     width: 9%; 
    } 
}

和HTML（和PHP位的）：

<div class="si-share-box"> 

      <a class="si-share-box" href="https://twitter.com/intent/tweet?text=' . $title . ' - '. $shortlink .'" onclick="window.open(this.href, \'mywin\', 
      \'left=50,top=50,width=600,height=350,toolbar=0\'); return false;"> 
       <div class="si-button si-button-twitter" title="Tweet on Twitter"> 
        <span class="si-share-button"><span class="si-icon"></span> 
        <i class="shareit-twitter shareit"></i> 
        <p class="si-share-text">Tweet</p> 
        </span> 
        <span class="si-share-counter">'.$socialShareCount->getTweetCount().'</span> 
       </div> 
      </a> 

      <a class="si-share-box" href="http://www.facebook.com/sharer.php?u=' . urlencode(get_permalink()) . '" onclick="window.open(this.href, \'mywin\', 
      \'left=50,top=50,width=600,height=350,toolbar=0\'); return false;"> 
       <div class="si-button si-button-facebook" title="Share link on Facebook"> 
        <span class="si-share-button"><span class="si-icon"></span> 
        <i class="shareit-facebook shareit"></i> 
        <p class="si-share-text">Like</p> 
        </span> 
        <span class="si-share-counter">'. $facebookCount['share_count'].'</span> 
       </div> 
      </a> 


      <a class="si-share-box" href="http://plus.google.com/share?url=' . get_permalink() . '" onclick="window.open(this.href, \'mywin\', 
      \'left=50,top=50,width=600,height=350,toolbar=0\'); return false;"> 
       <div class="si-button si-button-gplus" title="Share link on Google+"> 
        <span class="si-share-button"><span class="si-icon"></span> 
        <i class="shareit-gplus shareit"></i> 
        <p class="si-share-text">Share</p> 
        </span> 
        <span class="si-share-counter">'.get_plusones_si($url).'</span> 
       </div> 
      </a> 

      <a class="si-share-box" href="https://getpocket.com/save?url=' . urlencode(get_permalink()) . '&amp;media=' . (!empty($image[0]) ? $image[0] : '') . '" onclick="window.open(this.href, \'mywin\', 
      \'left=50,top=50,width=600,height=350,toolbar=0\'); return false;"> 
       <div class="si-button si-button-pocket" title="Save to Pocket"> 
        <i class="shareit-pocket shareit-small"></i> 
        </span> 
       </div> 
      </a> 

      <a class="si-share-box" href="http://reddit.com/submit?url=' . get_permalink() . '" onclick="window.open(this.href, \'mywin\', 
      \'left=50,top=50,width=600,height=350,toolbar=0\'); return false;"> 
       <div class="si-button si-button-reddit" title="Share link on Reddit"> 
        <i class="shareit-reddit shareit-small"></i> 
        </span> 
       </div> 
      </a> 

      <a class="si-share-box" href="https://linkedin.com/shareArticle?mini=true&url=' . $title .' | '. $shortlink . ' &via=' . urlencode($twetter_user ? $twetter_user : get_bloginfo('name')) .'" onclick="if(!document.getElementById(\'td_social_networks_buttons\')){window.open(this.href, \'mywin\', 
      \'left=50,top=50,width=600,height=350,toolbar=0\'); return false;}" > 
       <div class="si-button si-button-linkedin" title="Share link on LinkedIn"> 
        <i class="shareit-linkedin shareit-small"></i> 
        </span> 
       </div> 
      </a> 

      <a class="si-share-box" href="http://pinterest.com/pin/create/button/?url=' . get_permalink() . '&amp;media=' . (!empty($image[0]) ? $image[0] : '') . '" onclick="window.open(this.href, \'mywin\', 
      \'left=50,top=50,width=600,height=350,toolbar=0\'); return false;"> 
       <div class="si-button si-button-pinterest" title="Pin it on Pinterest"> 
        <i class="shareit-pinterest shareit-small"></i> 
        </span> 
       </div> 
      </a> 
     </div>

来源

2014-09-29 Mehedi Hassan Dip

你不能在你的问题中发布代码，而不是链接到** 2 **不同的页面......？ – Novocaine 2014-09-29 09:47:43

我认为它会变得很大。我是Stack Overflow的新手。对于那个很抱歉。 – 2014-09-29 09:50:06

在这种情况下，您应该将其剥离到准备阶段 - 例如， html和CSS来展示问题的单个元素。它使人们更容易/更快地提供帮助。 – Novocaine 2014-09-29 09:51:23

原因造成的问题

我这样做：

CSS

.si-icon { display: none; } 
.si-share-text { 
    /*float: left; - take away the float */ 
    line-height: 16px; /* add this lineheight */ 
    margin: 0 !important; 
    padding-left: 20px; 
    padding-right: 20px; /* add this padding */ 
    text-align: center; 
}

这给你你正在寻找

来源

2014-09-29 09:57:54

谢谢！它的工作:) – 2014-09-29 10:02:02

不客气 - 谢谢！ – 2014-09-29 10:05:12

我倒是DELET电子元素，它什么都不做，使它变得讨厌。然后修改.si-share-text就像：

.si-share-text { 
     text-align: center; 
     float: left; 
     margin: 0px !important; 
     padding-left: 5px; 
     padding-right: 20px; 
    }

现在看来对我来说很好。

来源

2014-09-29 09:57:34 tfrascaroli

移动si-icon结果到修复问题并保留填充后：

<span class="si-share-button"> 
    <i class="shareit-gplus shareit"></i> 
    <p class="si-share-text">Share</p> 
    <span class="si-icon"></span> 
</span>

来源

2014-09-29 10:02:03 SWa

Firefox和Opera浏览器出现奇怪的CSS问题

回答

相关问题