Hopkins Homepage

V čem je problém s Internet Explorerem?

Internet Explorer však tento posuvník umísťuje do bloku, čímž mu zmenší viditelnou výšku o výšku posuvníku. To má za následek vložení i vertikálního posuvníku.

Internet Explorer — 3 řádkový blok

To sice není tak tragické u vysokých (víceřádkových) bloků, avšak u jednořádkových je to docela výrazný nedostatek/problém, neboť text pak není vůbec vidět.

Internet Explorer — 1 řádkový blok

A jak to napravit?

Relativně jednoduše. Stačí pro prohlížeče IE v CSS přidat pravidlo pro zvýšení odsazení od spodního okraje a pro jistotu i skrytí vertikálního posuvníku.

code {
	padding-bottom: 20px;
	overflow-y: hidden;
}

Pro ty, kdo neví, jak vložit nějaký kód pouze pro IE ještě doplním, že se k tomu dá využít podmíněných komentářů:

Tento přístup má nepříjemný vedlejší efekt v tom, že okraj se odsadí i v případě, kdy žádný posuvník zobrazen není a tím vznikne pruh prázdného místa.

Alternativou je odsazovat pomocí JS až když je třeba. Toto řešení však spoléhá na fakt, že uživatelé budou mít JS vždy povolený, což není moc dobrá praxe, pokud existuje alternativní řešení.

Jako „ideální“ řešení mě napadá nastavení odsazení pomocí CSS a poté kontrola pomocí JS a případné odstranění tam, kde odsazení není potřeba. Takový JS (vložený opět pouze pro IE) by mohl vypadat např. takto:

var codes = document.getElementsByTagName("code");
for (var i=0; i < codes.length; i++) {
	if (codes[i].scrollWidth <= codes[i].offsetWidth) {
		codes[i].style.paddingBottom = (parseInt(codes[i].currentStyle.paddingBottom)-20) + "px";
	}
}