This test is to find out the user's Text Size setting in IE, and, if needed, take appropriate measures. The concept used here is to have a hidden element with a small line-height and then get the offsetHeight from it (it can't have display:none, since then it won't get any offsetHeight).
The offsetHeight might depend on the general text size for the page. In this page, this is the CSS used:
*{
margin:0;
padding:0;
font-size:100%;
}
body{
font:normal 0.74em/1.7em Arial, Helvetica, sans-serif;
}
div#font-size-test{
position:absolute;
visibility:hidden;
line-height:0.5em;
}
Then I have an element with the id "font-size-test":
<div id="font-size-test">abc</div>
Enter the script that calculates the height of the div
element:
function checkFontSizeInIE(){
if(document.getElementById && document.getElementById("font-size-test")){
// 4 - smallest, 5-smaller, 6 - medium, 7 - larger, 8 - largest
var intOffsetHeight = document.getElementById("font-size-test").offsetHeight;
var strTextSizeSetting;
if (intOffsetHeight == 4){
strTextSizeSetting = "Smallest";
}
else if (intOffsetHeight == 5){
strTextSizeSetting = "Smaller";
}
else if (intOffsetHeight == 6){
strTextSizeSetting = "Medium";
}
else if (intOffsetHeight == 7){
strTextSizeSetting = "Larger";
}
else if (intOffsetHeight == 8){
strTextSizeSetting = "Largest";
}
var strAlertText = "Your text setting is " + strTextSizeSetting;
if(!document.all && navigator.userAgent.search(/MSIE/i) == -1){
strAlertText = "You don't seem to be using IE. \n
However, the current test element's offsetHeight is "
+ intOffsetHeight;
}
alert(strAlertText);
}
}
window.onload = function (){
if(document.getElementById && document.getElementById("check-text-size")){
document.getElementById("check-text-size").onclick = checkFontSizeInIE;
}
}