IE8ではすでにサポートされていないCSS Expressionですが、業務では使っています。んでもって、やっぱり難しいですね。思わぬところで無限ループが発生してしまう。
たとえば、次のようなソース
<html>
<head>
<style type="text/css" media="all">
.maxheight {
width:60px;
overflow:auto;
height:expression(document.all('testdiv').clientHeight > 79 ? "80px" : "auto");
}
</style>
</head>
<body>
<div id="testdiv" class="maxheight">
<div width="100%">
aaaaa<br/>
bbbbb<br/>
ccccc<br/>
ddddd<br/>
eeeee<br/>
fffff
</div>
</div>
</body>
</html>BR>
高さを80pxに制限するmax-heightのCSS Expression版ですが、このままであれば全然問題ありません。ただし、aaaaaやeeeeeの文字列を増やすと、横スクロールバーが出現して無限ループ突入。
実際に発生したケースとしては、横幅をwidthでガチガチに固め、さらにword-breakを雨あられと定義し、縦スクロールバーが出現しても大丈夫なように右側に十数pxほど余裕を持たせてありました。
こちらも通常の場合は問題なく動くのですが、Windowsの「画面のプロパティ」からデザインタブのフォントサイズを特大にすると、縦スクロールバーの横幅が広がり、十数pxの余裕を食いつぶして横スクロールバーが出現。当然のごとく無限ループ突入です。
behaviorを使用して挙動を制限しなかったのは間違いかもしれませんが、これはちょっと気付かない…
しょぼーん。。。