Why the page displays differently in IE8 and in chm (CSS "display: inline-block" issue)

StackOverflow https://stackoverflow.com/questions/17042914

  •  31-05-2022
  •  | 
  •  

Question

On a Windows 7 with IE8, I find display: inline-block works quite well. However, after I compile the html file into chm, the page inside chm does not display well, as if inline-block does not take any effect.

Is there a way to have chm display the same as in IE8? Thank you.

enter image description here

My html source is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title to fill</title>
<meta charset="utf-8">
<style type="text/css">
#topcanvas {
    z-index: 0;
    top: 0; 
    left:0;
    width:100%;
}

#chjnavi {
    font-size: 10pt;
    background-color: #eee;

    padding: 0em 1em;
    list-style-type: none;  
    position: relative;
    z-index: 0;
}

#chjnavi ul {
    margin: 0;
    padding: 0;
}

#chjnavi li {
    margin: 0;
    padding: 8px;
    display: inline-block;
        /* !!! */

    cursor: pointer;
}

</style>
</head>

<div id="topcanvas">
<div id="chjnavi">
    <ul id="navibar_topul">
        <li id="gentoc-t">item 1</li>
        <li id="codecolor-t">item 2</li>
        <li id="linenum-t">item 3</li>
    </ul>
</div>
</div>
<p> My text. </p>
</body>
</html>
Was it helpful?

Solution

I find the answer finally. A post at west-wind.com tells me that I need to do a registry hack to have CHM reader(hh.exe) use IE8 rendering mode, otherwise, hh.exe uses at most IE7.

The registry hack is: Save the following code to a .reg file, then double click to import into registry.

REGEDIT4

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION]
"hh.exe"=dword:00001f40

OK. At least there is a solution for IE8 M$ system.

This question is related to Will the IE9 WebBrowser Control Support all of IE9's features, including SVG?

OTHER TIPS

Instead of Inline-block you with have to use float:left; for IE8 as it doesn't support the property of Inline-block;

So this is what you will have to add to your code.

#chjnavi li {
    margin: 0;
    padding: 8px;
    display: inline-block;
    cursor: pointer;
    float:left\9; /* This works for IE8 and below  so apply this to your code*/
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top