0

Есть у меня адаптивный блок с шириной в зависимости от надписи. Как его расположить точнехонько внизу по центру блока 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>

2 ответа 2

2

Хром и Сафари по разному рендерят шрифты, сафари например добавляет свои пиксели. поэтому нужно делать проверку с помощью js-а и добавлять класс, в котором делать фикс для маков:

<script>
    if(navigator.userAgent.indexOf('Mac') > 0)
    $('body').addClass('mac-os');
</script>

<style>
.mac-os .selector {property:value;}
</style>

или использовать хак:

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media {
.selector { property:value; } 
}}
2
  • спасибо. под .selector вы что имеете ввиду - mad-breadcrumbs? или все те селекторы, которые со шрифтами и отступами? мне просто эта запись не очень-то понятна)
    – Вася
    6 окт 2015 в 9:03
  • 1
    @Вася, да, это ваш класс mad-breadcrumbs
    – Neka
    6 окт 2015 в 10:50
1

Просто поставьте width на .trail-end-wrapper. Например я поставил width: 276px;. Посмотрите так

.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 {
  width: 276px;
  display: table-cell;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.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>

Или так

.breadcrumbs {
  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 {
  width: 276px;
  display: table-cell;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.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>

3
  • да, работает, но для больших экранов (кстати, в чем отличие первого и второго способа?). конкретно в данном случае для фразы личный кабинет картинки съезжают при экране меньше, чем 600, а как быть, если фраза длиннее? по медиазапросам так просто это не отследишь, если это вообще возможно..
    – Вася
    6 окт 2015 в 9:00
  • 1
    @Вася обновил ответ посмотрите "На всю страницу" 6 окт 2015 в 10:05
  • да, отлично! только подправьте для более правильного ответа min-width: 276px; - все-таки длина может быть больше и bottom: 0; transform: translate(-50%, 0); по заданию просто было внизу расположить
    – Вася
    6 окт 2015 в 11:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.