Firefox 및 Opera 브라우저에서 이상한 CSS 문제가 발생했습니다.

Question

내 웹 사이트의 공유 버튼을 만들었지 만 Firefox와 Opera에서 약간 엉망입니다. 그것은 크롬과 심지어 IE에서 좋아 보인다. 여기

은 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의 비트) : 나는 delet 거라고

<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> 

Answer 1

<span class="si-icon"></span> 내가이 할 것이다 문제

의 원인이되는 :

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; 
} 

그리고 이것은 당신이

Answer 2

e <span class="si-icon"></span> 요소는 아무 것도하지 않고 불쾌하게 만듭니다. 그런 다음 .si-share-text을 다음과 같이 수정하십시오.

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

이제 멋진 모양입니다.

Answer 3

가 si-icon 이동 찾고있는 결과를 제공 ~ <p>은 문제를 해결하고 채우기를 유지합니다.

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