Почему переполнение-x: скрытый клип мои descenders?

Я хотел бы иметь элемент title с overflow-x:hidden и overflow-y:visible. Однако по какой-то причине свойство overflow-y, похоже, не соблюдается. Вы можете наблюдать это здесь (проверено на Chrome и Firefox): http://jsfiddle.net/YgsAw/3/

В этой демонстрации я ожидаю увидеть "jjjjj", но вместо этого j отключены и больше похожи на 1.

Если я устанавливаю overflow-x:visible в теге h1, тогда внезапно отображается полная высота текста, но установка overflow-x:hidden делает его обрезанным. Я ожидал бы такого поведения от overflow-y, но это, кажется, не имеет никакого эффекта. Почему это, и что я могу с этим сделать?

Ответ 1

Я нашел несколько ответов в предыдущем вопросе . Согласно спецификации:

Вычисленные значения overflow-x и overflow-y совпадают с указанными значениями, за исключением того, что некоторые комбинации с visible невозможны: если один из них указан как visible, а другой - scroll или auto, то visible устанавливается на auto. Вычисленное значение overflow равно вычисленному значению overflow-x, если overflow-y - то же самое; в противном случае это пара вычисленных значений overflow-x и overflow-y.

Кроме того, на на этой странице автор упоминает, что многие браузеры налагают дополнительные ограничения:

В Gecko Safari, Opera, "visible становится" автоматически также в сочетании с "скрытым" (другими словами: "visible становится" автоматически в сочетании с чем-либо другим, отличным от "видимым" ).

Эта же страница также предоставляет демонстрации для всех возможных комбинаций, где этот эффект можно наблюдать.

Мне не известно о жизнеспособном обходном пути для моей ситуации.

ИЗМЕНИТЬ

Я уверен, что могу сделать то, что хочу, вложенным тегом заголовка в другой тег: <div><h1>title</h1></div>. Внутренний h1 имеет line-height:normal, чтобы сделать все видимым по вертикали, а также overflow:hidden, чтобы сделать его усеченным. Внешний элемент может иметь строго ограниченную высоту и overflow:visible. Это не идеальный вариант, но он кажется лучшим вариантом.

Ответ 2

Кажется, что изменение элемента H1 в встроенный элемент даст вам желаемые результаты:

h1 {
    margin: 10px;
    padding: 0;        
    overflow-x: hidden;
    overflow-y: visible;
    line-height: 0.5em;
    display:inline;
}

Просто убедитесь, что следующий элемент является элементом блока, поэтому он не запускается в той же строке. Это или используйте правильную высоту линии, а затем используйте отрицательные поля. В конце концов, я могу только догадываться, что вы пытаетесь сделать... Удачи!