grid布局在浏览器中显示正常，但打包成exe后却无法正确显示，如何解决？
问题遇到的现象和发生背景
浏览器中查看，没有异常
用HTMLRunExe打包，变成上下布局
问题相关代码，请勿粘贴截图
<style>
.item1 { grid-area: header;text-align: center;padding: 10px 20px;}
.item2 { grid-area: menu;padding: 0px 10px 0px 0px;}
.item3 { grid-area: main; padding: 10px 20px;}
.item4 { grid-area: right;padding: 20px 20px;}
.grid-container {
display: grid;
grid:
'header header header header header header header'
'menu main main main main main right';
grid-gap:1px;
background-color: sandybrown;
}
.grid-container > div {
background-color: rgba(255,255,255,0.9);
}
</style>
<style type="text/css">
#sub_menu_1,#sub_menu_2,#sub_menu_3,#sub_menu_4,#sub_menu_5,#sub_menu_6,#sub_menu_7,#sub_menu_8,
#sub_menu_9,#sub_menu_10,#sub_menu_11,#sub_menu_12,#sub_menu_13,#sub_menu_14{
display: none;
}
ul li:hover{
cursor: pointer;
}
</style>
请问是我代码的问题吗？请各位帮忙解答，谢谢。
浏览器的渲染功能和exe里的浏览器组件的不一样吧 ，参考某浏览器的急速模式和兼容模式
看你用的浏览器是chome内核的，你程序改用cefsharp浏览器组件嵌入再试试
以下是完整的主页代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<style>
.item1 { grid-area: header;text-align: center;padding: 10px 20px;}
.item2 { grid-area: menu;padding: 0px 10px 0px 0px;}
.item3 { grid-area: main; padding: 10px 20px;}
.item4 { grid-area: right;padding: 20px 20px;}
.grid-container {
display: grid;
grid:
'header header header header header header header'
'menu main main main main main right';
grid-gap:1px;
background-color: sandybrown;
}
.grid-container > div {
background-color: rgba(255,255,255,0.9);
}
</style>
<style type="text/css">
#sub_menu_1,#sub_menu_2,#sub_menu_3,#sub_menu_4,#sub_menu_5,#sub_menu_6,#sub_menu_7,#sub_menu_8,
#sub_menu_9,#sub_menu_10,#sub_menu_11,#sub_menu_12,#sub_menu_13,#sub_menu_14{
display: none;
}
ul li:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1"><p>轩辕剑系列攻略全集</p></div>
<div class="item2">
<ul>
<li onclick = "f('sub_menu_1')">轩辕剑壹
<ul id="sub_menu_1">
<li>攻略正文</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_2')">轩辕剑贰
<ul id="sub_menu_2">
<li>新人入门</li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_3')">轩辕剑外传：枫之舞
<ul id="sub_menu_3">
<li><a href="../swdebook/txt/3swda/1welcome.html">新人入门</a></li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>无用支线</li>
<li>战斗分支</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_4')">轩辕剑叁：云和山的彼端
<ul id="sub_menu_4">
<li>新人入门</li>
<li>攻略·欧洲篇</li>
<li>攻略·阿拉伯篇</li>
<li>攻略·中国篇</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_5')">轩辕剑叁外传：天之痕
<ul id="sub_menu_5">
<li>新人入门</li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_6')">轩辕剑伏魔录
<ul id="sub_menu_6">
<li>攻略正文</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_7')">轩辕剑肆：黑龙舞兮云飞扬
<ul id="sub_menu_7">
<li>新人入门</li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>攻略·DOMO工作室</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_8')">轩辕剑外传：苍之涛
<ul id="sub_menu_8">
<li>新人入门</li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>攻略·DOMO工作室</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_9')">轩辕剑伍：一剑凌云山海情
<ul id="sub_menu_9">
<li>新人入门</li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>攻略·DOMO工作室</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_10')">轩辕剑外传：汉之云
<ul id="sub_menu_10">
<li>新人入门</li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>攻略·DOMO工作室</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_11')">轩辕剑外传：云之遥
<ul id="sub_menu_11">
<li>新人入门</li>
<li>攻略·本篇</li>
<li>攻略·兰茵篇</li>
<li>攻略·五丈原暮云篇</li>
<li>攻略·五丈原朝云篇</li>
<li>攻略·DOMO工作室</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_12')">轩辕剑陆：凤凌长空千载云
<ul id="sub_menu_12">
<li>新人入门</li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>攻略·DOMO工作室</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_13')">轩辕剑外传：穹之扉
<ul id="sub_menu_13">
<li>新人入门</li>
<li>攻略·起之章</li>
<li>攻略·承之章</li>
<li>攻略·转之章</li>
<li>攻略·结之章</li>
<li>攻略·DOMO工作室</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<ul>
<li onclick = "f('sub_menu_14')">轩辕剑柒
<ul id="sub_menu_14">
<li>新人入门</li>
<li>攻略正文</li>
<li>资料设定</li>
</ul>
</li>
</ul>
<script type="text/javascript">
function f(str){
var sub_menu = document.getElementById(str);
var dis_v = sub_menu.style.display;
if(dis_v == "block")
sub_menu.style.display = "none";
else
sub_menu.style.display = "block";
}
</script></div>
<div class="item3"><p>你好！</p>
<p>感谢您使用本攻略合集，本合集是以让玩家们能够不走弯路获得最完整的游戏流程体验而制作，我们希望能通过本攻略让您可以较为轻松的达成游戏的全收集。</p>
<p>本攻略合集的文本部分由<b>秦天蓝羽</b>，<b>履虫</b>，<b>绿丝绦</b>制作，图片部分则由<b>老饕</b>，<b>迷糊</b>两位制作，电子书编译由<b>秦天蓝羽</b>制作。目前已完成轩辕剑壹至轩辕剑陆的攻略部分。</p>
<p>很遗憾本攻略合集目前仍然是先行版，我们想要制作的内容尚未彻底完成，由于本项目组没有专业程序员的协助，因此界面展现的效果会比较简陋，我们仍在优化过程中，还望海涵。</p>
<p>如果您发现本攻略有什么遗漏错误之处，或是想要帮助我们对攻略全集进行优化，或是想要参与攻略制作，欢迎与我们联系。</p>
<p>联系方式：<br>QQ群：435820296<br/></p>
</div>
<div class="item4"><p><b>◎小纸条</b><br>这个区域是用来放置各种tips的！<br/></p>
<p><b>◎版权声明</b><br>游戏版权属于SOFTSTAR大宇资讯股份有限公司。<br/>
<br>文字版权属于秦天蓝羽，履虫，绿丝绦等作者，图片版权属于老饕，迷糊等作者。<br/>
<br>对本攻略进行拆包、提取等操作请先取得作者的许可。<br/>
</p></div>
</div>
</body>
</html>