Почему не прилипает элемент :after?

Question

[Владислав Чернушевич]

Есть элемент 1 тур
для него прописаны стили

p.tour-step {
border-radius: 5px 0 0 5px;
font: 800 14px/40px 'Open Sans', arial, sans-serif;
padding: 0 13px 0 16px;
background: #2C2221;
background: rgba(44, 34, 33, 0.2);
position: relative;
margin-right: 16px;
}
p.tour-step:after {
content: '';
position: absolute;
display: inline-block;
right: -7px;
width: 0;
height: 0;
border-top: 20px solid rgba(0, 0, 0, 0);
border-bottom: 20px solid rgba(0, 0, 0, 0);
border-left: 7px solid rgba(44, 34, 33, 0.2);
}

Получается вот такая ботва
my.jetscreenshot.com/7184/20140919-wmgn-209kb

Но в некоторых браузерах (opera 24, например) элемент :after не приклеиваться
my.jetscreenshot.com/7184/20140919-zhyr-65kb

Можно, конечно сделать все одним рисунком. Но как-то топорно. Можно ли как-нибудь решить этот вопрос более красивым способом?

Answer 1

[Евгений Петров]

Попробуйте как для IE6

left:0;
top:0;
margin-left:100%;

И уберите display: inline-block — не имеет никакого смысла.

Comments

[Владислав Чернушевич]

Это помогло. Но возник еще один вопрос. Похож на предыдущий.
Для блока
.block {
width: 930px;
padding: 42px 103px 0px;
position: relative;
height: 154px;
}
.block:before {
content: '';
display: inline-block;
width: 15px;
height: 196px;
position: absolute;
top: 0;
right: -1px;
margin-right: 100%;
background: url(img/sprite.png) -1360px -568px;
}
добавляется элемент слева.
https://yadi.sk/i/ZjoNAs1jbZNAQ (наклонная такая серая штука добавляется)
Вот исходник самой наклонной https://yadi.sk/d/-yOIF1s-bZNHF
В опере появляется белая рамка https://yadi.sk/i/Ang5gYlQbZNKx
Как решить этот вопрос?

[Евгений Петров]

А зачем вам понадобилось применять margin-right? left:0 работает прекрасно даже в совсем старых браузерах. Кроме того, судя по картинке у вас в Opera масштаб выставлен не 100%. Нажмите Ctrl+0 и полоска пропадёт.

Уберите же вы display: inline-block — он вообще не нужен. А вот для фона no-repeat добавьте.

Ну и такие однотонные скосы совсем по-другому делаются.

[Владислав Чернушевич]

В том-то и дело, что масштаб 100%. А как такие скосы еще можно сделать? Бордером?

[Евгений Петров]

@Uladzislau
попроще jsfiddle.net/txq70t0v
чуть сложней jsfiddle.net/08o9tp24

[Владислав Чернушевич]

ага, и получи в 11 осле https://yadi.sk/i/dBouvtHHba2g5

[Евгений Петров]

@Uladzislau а у меня так в IE11



У вас однозначно выставлен масштаб. В этом случае бороться придётся с помощью нахлёста двойных частей, либо изготовления цельного фона (например, SVG).

Answer 2

[Виталий Киренков]

Я бы посоветовал чутка иначе. Вместо right: -7px; поставить left: 100%. И если всё таки будет просвет, то добавить margin-left: -1px; от этого вы ничего не потеряете.

Comments

[Евгений Петров]

Ну это и есть эффект неверного подсчёта для нечётного размера, который наблюдался в IE6. Лечится использованием margin-left:100% вместо left:100%.

[Виталий Киренков]

@Petroveg Согласен. "Те же яйца, вид сбоку..." =)) Просто в моём варианте, как мне кажется, чутка больше возможностей для маневрирования.

[Евгений Петров]

@DeLaVega если есть нарушение (как в IE6), то ставить right:0 или left:100% — монопенисуально. Всё равно сдвиг в пиксель будет. Только использование margin приводило к точному совмещению.