Какой хак для Webkit-браузеров использовать для полноценной работы главной страницы?

Question

[Сергей Золотарёв]

Доброго вечера!
Кто нибудь сталкивался со следующей проблемой?
Я ещё сталкиваюсь с одной ситуацией, где Webkit приносит всем много проблем сейчас.
На главной странице сайта есть интерфейс ленты новостей.
Лента состоит из 3 блоков 3 последних новостей.
Проблема заключается в самой работе последнего блока и применил следующий CSS3-код для этого:

.content > .matherial-cont .found-news-feed .news-slide  .news-feed-slider-cont .slide  .news{
  width: 130mm; 
  height: calc(195mm+39mm); 
  background-size:cover;
  background-repeat:no-repeat;
  display:inline-table;
  color:white;
  display:inline-table;
  border-radius:39px 39px;
  background-image:url("/media/images/site/desktop/homepage/foundnewsfeed/center.png");
  color:white;
}

.content > .matherial-cont .found-news-feed .news-slide  .news-feed-slider-cont .slide  .news:nth-child(1){
    float:left;
    margin-left:5mm;
}
.content > .matherial-cont .found-news-feed .news-slide  .news-feed-slider-cont .slide  .news:nth-child(2){
    margin-left:10mm;
}
/*Самый проблемный дочерний контейнер.*/
.content > .matherial-cont .found-news-feed .news-slide  .news-feed-slider-cont .slide  .news:nth-child(3){
   float:right;
   margin-right: 5mm;
}

Где класс .news-сам элемент описания новости.
Со всеми элементами отлично справляются Firefox, IE и прочие браузеры на Gecko...
А Webkit плохо справляется с третьим элементом.
Пробовал возможности JQuery и Detect.js, и эти с возможностями справляются те же гековские друзья:

function CrossBrowsing(){
	var threenews=$(".content > .matherial-cont .found-news-feed .news-slide .news-feed-slider-cont .slide .news:nth-child(3)");//К третьему новостному блоку.
    var user=detect.parse(navigator.userAgent);
    if(user.browser.family=="Firefox"){
    	 threenews.css("margin-top","-1mm");//Отступаем третий блок в Firefox на -1мм.
    }
    else if(navigator.vendor=="Google inc."){
    	threenews.css("margin-top","-238mm");//Отступаем третий блок в Opera.
    }

    if($.browser.msie){
        var twonews=$(".content > .matherial-cont .found-news-feed .news-slide .news-feed-slider-cont .slide .news:nth-child(2)");
        twonews.css("margin-left","19mm");
    }
}
$(document).ready(CrossBrowsing);

Пробовал браузерные префиксы применять, изменять каждый раз этот JavaScript-код, переыскивал материалы в Яндексе и ничего не получилось.

Как я знаю, сейчас браузеры на движке Gecko расширяют свои границы, а Chronium захватывает границы HTML и CSS за последнее время...

Какой бы хак для Webkit применить для решения этой проблемы?
Я соблюдаю саму кроссбраузерность, изучая материалы в Caniuse...^-)

Comments

[yarovikov]

Верстка просто жесть.

[Сергей Золотарёв]

yarovikov, где вёрстка?

[yarovikov]

Сергей Золотарёв, сорян, css жесть. Но верстка тоже, судя по всему.

[Сергей delphinpro]

Капец.

Для того чтобы расположить три блока в ряд, достаточно одного правила для родителя:

.news {
  disaply: flex;
}

Чтобы добавить отступы между ними, еще два:

.news {
  ...
  justify-content: space-between;
}
.news-item {
  width: 30%;
}

Чтобы обеспечить откат для мамонтов, добавим еще парочку

.news-item {
  ...
  display:inline-block;
  vertical-align: top;
}

Всё. Что вы там нагородили, хз. Конечно, мой пример утрирован, в конкретном дизайне правил может быть поболее ради оформления, ну так оно и будет для оформления, а не для раскладки.

[Moskus]

Стили и описание проблемы - просто на грани шизофрении. Присоединяюсь, так не делается.