Question

我为我的网站创建了共享按钮，但在Firefox和Opera上看起来有些混乱。虽然它在Chrome甚至IE上看起来都不错。这是它的样子：

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>

Answer 1

我删除了元素，它什么都不做，让它变得讨厌。然后修改.si-share-text之类的：

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

现在看起来很好。

Answer 2

导致问题

我会这样做：

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

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

Firefox和Opera浏览器上的CSS问题很奇怪

3 个答案: