Из-за каких элементов работа криво отображается в IE, что нужно убрать или поправить?

Question

[Aleksey111]

https://codepen.io/Aleks70694/pen/LWNZGV?editors=1100#0

Comments

[Дмитрий Лузанов]

А что криво-то отображается? У меня все ок.

[Aleksey111]

Predve4niy: добавил фото

[sim3x]

так в чем проблема?

[Aleksey111]

sim3x: в том, что в хроме уголки отображаются нормально, а в IE криво, на скриншоте разве не видно? специально верх выделил, а снизу и так видно

[sim3x]

Aleksey111:
задача - научиться делать border-radius как деды делали?

[Ankhena]

Aleksey111: Ой
А border-radius чем не угодил?

Если очень хочется делать это таким странным способом, то вам мешают лишние отступы у инлайн-блоков. Как убрать гуглится по запросу "отступы у inline-block"

[Ярослав Иванов]

Что за жесть я только что увидел?)))

[Ярослав Иванов]

Вы серьезно ?))))

[Aleksey111]

Ярослав Иванов: это где такое?

[Aleksey111]

sim3x: ну да, типа того

[Aleksey111]

Ankhena W: спасибо) не думал, что именно они влияют

[Ярослав Иванов]

Aleksey111: Это я для наглядности показать людям какие есть извращенцы.

[Aleksey111]

Ярослав Иванов: а Вы наверное сразу стали профессионалом)

[Aleksey111]

Ярослав Иванов: и зачем было искажать? отображается нормально, в хроме и мозиле, в ie небольшие искажения, при уменьшении окна тоже не слазит никуда ничего

[Ярослав Иванов]

Aleksey111: Вы суть не поняли. То что вы сделали и до этого додумались это здорово. Это просто другой путь. Но зачем в 2017 городить строки кода когда все решается через один параметр ? Ваш метод актуален для ie5-6 и везде где не поддерживается border-radius. Если я не знаю как делать - гуглю. И в первых строчках при запросе "html css круглые углы" мне бы всплыл материал с border-radius.

[Ярослав Иванов]

Aleksey111: На скриншоте я раздвинул блоки через css чтобы показать этот ужас)

[Ярослав Иванов]

Aleksey111: https://codepen.io/anon/pen/BWKQJL?editors=1100 и все

[Aleksey111]

Ankhena W: дело кстати не в инлайн блочном элементе, а в том, что bull внутри блока сдвигается немного почему то

[Ankhena]

Aleksey111: да и ладно. Если тренируетесь, то изучите border-image и всякие фокусы с :before и :after

[Ankhena]

Aleksey111: И тени и градиенты.
Толку будет больше.

Answer 1

[sim3x]

https://www.google.com.ua/search?q=border-radius

https://www.google.com.ua/search?q=graceful+degradation

Comments

[Aleksey111]

ну бордер радиус не нужен, нужно как делали раньше, вы правильно поняли

[sim3x]

Aleksey111: даже раньше через такую задницу не делали

Резали картинку и вставляли 4 уголка

А с появлением методики, которую я указал в ответе, вообще отказались от поодержки касивостей, для браузеров, которые их не поддерживают