0
我有下面的代碼不正確Chrome的表現將返回不同的結果。問題在於垂直社交div。當我將鼠標懸停在g +圖標上時，底部有一個3px高的空白區域。 我試圖改變填充從padding: 10px 0px 9px;到padding: 10px 0px 10px;並修復它在Chrome，但打破它在Firefox和IE。究竟是什麼造成了不一致？填充在Chrome
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,400italic");
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
body {
\t padding: 60px 0px;
\t background-color: rgb(220, 220, 220);
}
.event-list {
\t list-style: none;
\t font-family: 'Lato', sans-serif;
\t margin: 0px;
\t padding: 0px;
}
.event-list > li {
\t background-color: rgb(255, 255, 255);
\t box-shadow: 0px 0px 5px rgb(51, 51, 51);
\t box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
\t padding: 0px;
\t margin: 0px 0px 20px;
}
.event-list > li > img {
\t width: 100%;
}
.event-list > li > .info {
\t padding-top: 5px;
\t text-align: center;
}
.event-list > li > .info > .title {
\t font-size: 17pt;
\t font-weight: 700;
\t margin: 0px;
}
.event-list > li > .info > .desc {
\t font-size: 13pt;
\t font-weight: 300;
\t margin: 0px;
}
.event-list > li > .info > ul,
.event-list > li > .social > ul {
\t display: table;
\t list-style: none;
\t margin: 10px 0px 0px;
\t padding: 0px;
\t text-align: center;
\t width:100%;
}
.event-list > li > .social > ul {
\t margin: 0px;
}
.event-list > li > .info > ul > li,
.event-list > li > .social > ul > li {
\t display: table-cell;
\t cursor: pointer;
\t color: rgb(30, 30, 30);
\t font-size: 11pt;
\t font-weight: 300;
padding: 3px 0px;
}
.event-list > li > .info > ul > li > a {
\t display: block;
\t width: 100%;
\t color: rgb(30, 30, 30);
\t text-decoration: none;
}
.event-list > li > .social > ul > li {
padding: 0px;
}
.event-list > li > .social > ul > li > a {
padding: 3px 0px;
}
.event-list > li > .info > ul > li:hover,
.event-list > li > .social > ul > li:hover {
\t color: rgb(30, 30, 30);
\t background-color: rgb(200, 200, 200);
}
.facebook a,
.twitter a,
.google-plus a {
\t display: block;
\t width: 100%;
\t color: rgb(75, 110, 168) !important;
}
.twitter a {
\t color: rgb(79, 213, 248) !important;
}
.google-plus a {
\t color: rgb(221, 75, 57) !important;
}
.facebook:hover a {
\t color: rgb(255, 255, 255) !important;
\t background-color: rgb(75, 110, 168) !important;
}
.twitter:hover a {
\t color: rgb(255, 255, 255) !important;
\t background-color: rgb(79, 213, 248) !important;
}
.google-plus:hover a {
\t color: rgb(255, 255, 255) !important;
\t background-color: rgb(221, 75, 57) !important;
}
@media (min-width: 68px) {
\t .event-list > li {
\t \t position: relative;
\t \t display: block;
\t \t width: 100%;
\t \t height: 120px;
\t \t padding: 0px;
\t }
\t .event-list > li > img {
\t \t display: inline-block;
\t }
\t .event-list > li > img {
\t \t width: 120px;
\t \t float: left;
\t }
\t .event-list > li > .info {
\t \t background-color: rgb(245, 245, 245);
\t \t overflow: hidden;
\t }
\t .event-list > li > img {
\t \t width: 120px;
\t \t height: 120px;
\t \t padding: 0px;
\t \t margin: 0px;
\t }
\t .event-list > li > .info {
\t \t position: relative;
\t \t height: 120px;
\t \t text-align: left;
\t \t padding-right: 40px;
\t }
\t .event-list > li > .info > .title,
\t .event-list > li > .info > .desc {
\t \t padding: 0px 10px;
\t }
\t .event-list > li > .info > ul {
\t \t position: absolute;
\t \t left: 0px;
\t \t bottom: 0px;
\t }
\t .event-list > li > .social {
\t \t position: absolute;
\t \t top: 0px;
\t \t right: 0px;
\t \t display: block;
\t \t width: 40px;
\t }
.event-list > li > .social > ul {
border-left: 1px solid rgb(230, 230, 230);
}
\t .event-list > li > .social > ul > li {
\t \t display: block;
padding: 0px;
\t }
\t .event-list > li > .social > ul > li > a {
\t \t display: block;
\t \t width: 40px;
\t \t padding: 10px 0px 9px;
\t }
\t .event-list > li > .info > ul{
\t \t width: calc(100% - 40px);
\t }
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="event-list">
<li>
<img alt="My 24th Birthday!" src="https://farm5.staticflickr.com/4150/5045502202_1d867c8a41_q.jpg" />
<div class="info">
<h2 class="title">Mouse0270's 24th Birthday!</h2>
<p class="desc">Bar Hopping in Erie, Pa.</p>
<ul>
<li style="width:33%;">1 <span class="glyphicon glyphicon-ok"></span></li>
<li style="width:34%;">3 <span class="fa fa-question"></span></li>
<li style="width:33%;">103 <span class="fa fa-envelope"></span></li>
</ul>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>