为什么页面在IE8和chm中显示不同(CSS“display: inline-block”问题)

5
在Windows 7下使用IE8,我发现display: inline-block的效果非常好。但是,当我将html文件编译为chm文件后,在chm文件中显示的页面不好,好像inline-block没有起作用。

有没有办法让chm的显示效果和IE8一样呢?谢谢。

enter image description here

我的html源代码如下:

<!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>
2个回答

2
我最终找到了答案。west-wind.com上的一篇文章告诉我,我需要进行注册表修改才能让CHM阅读器(hh.exe)使用IE8渲染模式,否则,hh.exe最多只能使用IE7。
注册表修改代码如下:将以下代码保存为.reg文件,然后双击导入到注册表中。
REGEDIT4

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

好的。至少在IE8 M$系统中有一个解决方案。
这个问题与IE9 WebBrowser Control是否支持IE9的所有功能,包括SVG?有关。

使用这种方法需要注意一点:更改是全局的,这意味着所有的CHM内容都将使用更新的IE版本显示。这可能会对其他(较旧的)帮助文件造成问题,因为它们期望使用IE 7。个人而言,我没有遇到任何问题,但在更改人们机器上的全局设置之前,最好记住这一点。 - Rick Strahl

0

在IE8中,由于不支持Inline-block属性,所以你需要使用float:left;代替。

因此,这是你需要添加到你的代码中的内容。

#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*/
}

"left\9" 中的 \9 是什么意思? - Jimm Chen
你的代码仍在使用“inline-block”,与你的“而不是inline-block”的观点相反。 - Jimm Chen
\9 是用于 IE 的hack。在您的CSS之后添加此行代码,这将仅适用于IE,并不影响其他浏览器。代码中存在 inline-block 并不重要,因为无论如何它都将适用于其他浏览器,但在 IE 中却无效。 - Akshay
以防万一有人需要,正确的答案可以在此找到:https://dev59.com/32w15IYBdhLWcg3wisW-。但是这个答案在我的情况下会破坏页面的布局… - mrexodia

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接