Есть у меня адаптивный блок с шириной в зависимости от надписи. Как его расположить точнехонько внизу по центру блока breadcrumbs
, чтобы он оставался все время адаптивным. С помощью марджинов мне удалось расположить так, как того хочу, но заметна разница в 1px между браузерами хромом и сафари (пробовал и пиксели и em). Кажется что такое 1px, но на сайте это сразу бросается в глаза. Как можно это поправить? Смотрю в сторону абсолютного позиционирования, но тогда получается беда с адаптивностью.. Набросал фидл.
.breadcrumbs {
position: relative;
background: url("http://dnevniki.ykt.ru/upload/appearance/2014/3/h_10133_5687.jpg");
background-size: cover;
height: 300px;
margin-bottom: 5px;
padding-bottom: 0;
}
.breadcrumbs {
padding: 9px 0;
background-color: #f2f4f5;
}
.mad-breadcrumbs i {
color: #fff;
font-size: 24px;
}
.trail-end-table {
display: table;
margin: 0 auto;
}
.trail-end-wrapper {
display: table-cell;
vertical-align: top;
}
.trail-end-left {
background: url(http://s013.radikal.ru/i323/1510/e4/e8ee16bf4502.png) no-repeat;
height: 48px;
width: 18px;
display: inline-block;
}
.trail-end {
text-transform: uppercase;
color: #fff;
font-family: "HelveticaNeue-CondensedBold";
font-size: 18px;
background: url(http://s020.radikal.ru/i715/1510/20/0f05f5fc4613.jpg) repeat;
min-width: 240px;
height: 48px;
text-align: center;
line-height: 60px;
display: inline-block;
vertical-align: top;
}
.trail-end-right {
background: url(http://s020.radikal.ru/i715/1510/94/ab81953cb1a9.jpg
) no-repeat;
height: 48px;
width: 18px;
display: inline-block;
}
<div class="breadcrumbs">
<div class="container">
<div class="mad-breadcrumbs">
<div class="mad-breadcrumbs">
<div class="trail-end-table">
<div class="trail-end-wrapper"><span class="trail-end-left"></span><span class="trail-end">Личный кабинет</span><span class="trail-end-right"></span>
</div>
</div>
</div>
</div>
</div>
<!--/ .container-->
</div>