sond1k

Спасибо большое, я наконец то понял, что вы пытались сказать. Только вот момент с "базовая линия" смещается при том или ином vertical-align туда то.. При middle логично, что в серединку. Но там значений то много, можно где то про это почитать?

На так потому что мы ему ставим vertical-align: middle; Вот А спецификация говорит: выравнить вертикальную среднюю точку бокса по базовой линии родителя плюс половина x-высоты. Вот здесь и видно, что красная линия (va: middle) как раз с серединой Text совпадает. Т.е. vertical-align: middle смещает базовую линию элемента и отсюда уже "дальше едем"?) Но тогда как догадаться, куда сместиться базовая линия элемента, если он пуст, например, при text-top? Так а почему вы серую X родителя нарисовали именно такого размера? Может у родителя у меня шрифт 10px а у child 20px?

Да, вниз конечно, я перепутал. Но вверху свободное пространство, он обратно поднялся. Половина высоты буквы x. У этого блочного элемента есть своя установленная гарнитура. Вот половина высоты буквы x в соответствии с ней и есть половина x-высоты. Но он поднялся ровненько на половину высоты блока ) Это откуда такая гарнитура? шрифт у блока parent verdana 16px, предположим Почему вы рисуете базовую линию по середине? Изначально же не было vertical-align:middle у helper, и контента в нем нет. В спеке сказано, что в таком случае его baseline по его нижней границе Я наверно не могу понять, что там с базовой линией происходит. Если я даю элементу vertical-align:middle - его базовая линия меняется?

ДА! То, что вы говорите - логично. Но я не могу понять логики происходящего ) 1. helper на всю высоту parent - базовая линия по нижней границе helper 2. даем helper vertical-align:middle - базовая линия была по низу helper, и если по ней центрировать середину элемента, он вниз должен уехать, а не вверх. 3. Должен подняться на x-высоту родителя. Родитель - блочный div? Откуда и как тут x-высота?))

хм. Т.е. x-высота определяется изнутри? А если у меня там 5 строк с 5 разными размерами шрифтов? И по поводу смещения базовой линии? Ни где ведь не сказано, кажется, что она куда то смещается? Никак не могу понять Базовая линия строки - по низу helper, если даем ему middle - он должен выровнять свой центр с ней. А потом взять половину x-высоты... И еще, в спецификации сказано, что x-высота родителя - родитель тут вообще блочный div?

Я понимаю, что .child выравнял свой центр по базовой линии? А как же половина высоты символа x? Почему она проигнорирована? И как .helper может сдвинуть базовую линию? Как я понимаю, vertical-align:middle для .helper должен выровнять его середину по базовой линии и опять же + половина x-высоты?

<div class="parent"> <div class="helper"></div> <div class="child">TEXT</div></div>.parent { height:100px; width:600px; border:1px solid #ff0000;}.helper { display:inline-block; height:100%; width:1px; background:green;}.child { display:inline-block; vertical-align:middle; border:1px solid #0000ff;}Не могу понять, как работает способ вертикального центрирования. https://jsfiddle.net/mws18yoL/ Если дать элементу .helper vertical-align:middle, то центрируется отлично. Без этого нет. Но ведь должно и без того? Высота строки задана блоком .helper в 100% от родителя. Далее известно следующее - vertical-align:middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. Базовая линия - по низу .helper + половина высоты родительского элемента. Следуя этому элемент .child должен быть сейчас центрирован, однако на деле он просто сопоставил свою середину с базовой линией. Объясните пожалуйста, чего я не понимаю??

Вопрос снят, разобрался!

Нет, к сожалению, Ваш совет приводит к тому же эффекту. Подобрать размер рамки под рамку родительского - не выходит

Да, я думал об этом, но, второй псевдоэлемент мне необходим для текста внутри кнопки, т.к. иначе в IE не будут наследоваться :active для родителя, если разместить текст не через псевдо элемент Хотя, странно, текст обернутый в span - active не наследуется. Текст без span - все работает, вопрос снят, спасибо

Добрый день! Пытаюсь сделать кнопку - вот что получилось Уголок сделан через псевдо-элемент и свойства transform:translateX(-25px)rotate(45deg)skew(10deg, 10deg)scale(0.61); Мне нужно синюю рамочку вокруг уголка - как вокруг родительского блока. Если добавлять рамку к треугольнику, то во первых из за scale она не тех размеров, во вторых портится градиент. Подскажите пожалуйста, как сделать рамку?

<div id="test"></div>#test { width:150px; height:60px; background:#0066ff;}#test:active { background:#ff6600;}Вот такой простейший пример. В IE фон меняется с синего на рыженький через раз. При условии кликанья через одинаковые промежутки времени. Причем если сделать паузу, скажем, секунды 2, то все уже хорошо

Добрый день! Вопрос следующий. Есть на странице элемент с псевдоклассом active, при клике на этом элементе должен меняться например цвет фона. Во всех браузерах все работает хорошо, однако в IE всех версий :active срабатывает через раз, т.е. фон сменился, на следующем клике фон элемента не меняется. Т.е. :active срабатывает через раз. Причем onclick срабатывает исправно, на каждом клике. Предложите пожалуйста решение, можно на JS, или подскажите, куда копать..