Firefox和Opera浏览器上的CSS问题很奇怪
我为我的网站创建了共享按钮，但在Firefox和Opera上看起来有些混乱。虽然它在Chrome甚至IE上看起来都不错。这是它的样子：
如果你使用的是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() ) . '&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() . '&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>
3 个答案:
答案 0 :(得分：0)
我删除了<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;
}
现在看起来很好。
答案 1 :(得分：0)
<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;
}
这会为您提供您正在寻找的结果
答案 2 :(得分：0)
将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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？