87,910
社区成员
发帖
与我相关
我的任务
分享IE8下，DIV innerHTML属性赋值表格HTML，无法显示边框
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>:::报表展示:::</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script>
function import1(){
document.getElementById('viewDiv').innerHTML="<style>.c4{text-align:center;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-weight: bold;font-family: 宋体;color: #000000;}.c3{text-align:center;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-weight: bold;font-family: 宋体;color: #000000;}.c2{text-align:center;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-weight: bold;font-family: 宋体;color: #000000;}.c0{text-align:center;border-top:0px solid #000000;border-left:0px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000; border-collapse:collapse;font-size:22pt;font-weight: bold;font-family: 宋体;color: #000000;}.c6{text-align:left;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-family: 宋体;color: #000000;}.c5{text-align:center;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-weight: bold;font-family: 宋体;}.c1{border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-family: 宋体;color: #000000;}</style>"+
"<table cellspacing='0' cellpadding='0' style='border-collapse:collapse; width:1123.527653087796px;height:162.0px'><tr id='BYD_JC01_12-0' style='height:27.0px'><td class='c0' id='BYD_JC01_12-A0' rowspan=2 colspan=7>CMS科目对账表</td></tr><tr id='BYD_JC01_12-1' style='height:54.0px'></tr><tr id='BYD_JC01_12-2' style='height:27.0px'><td class='c1' id='BYD_JC01_12-A2' >部门：</td><td class='c1' id='BYD_JC01_12-B2' ></td><td class='c1' id='BYD_JC01_12-C2' border=1 >日期：</td><td class='c1' id='BYD_JC01_12-D2' ></td><td class='c1' id='BYD_JC01_12-E2' ></td><td class='c1' id='BYD_JC01_12-F2' ></td><td class='c1' id='BYD_JC01_12-G2' ></td></tr><tr id='BYD_JC01_12-3' style='height:27.0px'><td class='c2' id='BYD_JC01_12-A3' >序号</td><td class='c3' id='BYD_JC01_12-B3' >会计科目</td><td class='c3' id='BYD_JC01_12-C3' >科目名称</td><td class='c3' id='BYD_JC01_12-D3' >CMS期末余额</td><td class='c3' id='BYD_JC01_12-E3' >SAP期末余额</td><td class='c4' id='BYD_JC01_12-F3' >差额</td><td class='c5' id='BYD_JC01_12-G3' >备注</td></tr><tr id='BYD_JC01_12-4' style='height:27.0px'><td class='c1' id='BYD_JC01_12-A4' ></td><td class='c1' id='BYD_JC01_12-B4' ></td><td class='c1' id='BYD_JC01_12-C4' ></td><td class='c6' id='BYD_JC01_12-D4' ></td><td class='c6' id='BYD_JC01_12-E4' ></td><td class='c6' id='BYD_JC01_12-F4' ></td><td class='c1' id='BYD_JC01_12-G4' ></td></tr></table>";
}
</script>
</head>
<body>
<input type='button' text='import' onclick="import1()"/>
<div id="viewDiv"></div>
</body>
</html>
在IE8下，显示无边框，但是直接在body中直接显示样式及表格就能显示边框。
起因是做一个报表系统，EXT AJAX获取后台自动生成报表对应的HTML后，调用Panel的update方法，发现IE8下表格无边框，后来用HTML-》DIV.innerHTML同样存在一样的问题，求解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>:::报表展示:::</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script>
function import1(){
document.getElementById('viewDiv').innerHTML="<style>.c4{text-align:center;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-weight: bold;font-family: 宋体;color: #000000;}.c3{text-align:center;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-weight: bold;font-family: 宋体;color: #000000;}.c2{text-align:center;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-weight: bold;font-family: 宋体;color: #000000;}.c0{text-align:center;border-top:0px solid #000000;border-left:0px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000; border-collapse:collapse;font-size:22pt;font-weight: bold;font-family: 宋体;color: #000000;}.c6{text-align:left;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-family: 宋体;color: #000000;}.c5{text-align:center;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-weight: bold;font-family: 宋体;}.c1{border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;border-bottom:1px solid #000000; border-collapse:collapse;font-size:11pt;font-family: 宋体;color: #000000;}</style>"+
"<table cellspacing='0' cellpadding='0' style='border-collapse:collapse; width:1123.527653087796px;height:162.0px'><tr id='BYD_JC01_12-0' style='height:27.0px'><td class='c0' id='BYD_JC01_12-A0' rowspan=2 colspan=7>CMS科目对账表</td></tr><tr id='BYD_JC01_12-1' style='height:54.0px'></tr><tr id='BYD_JC01_12-2' style='height:27.0px'><td class='c1' id='BYD_JC01_12-A2' >部门：</td><td class='c1' id='BYD_JC01_12-B2' ></td><td class='c1' id='BYD_JC01_12-C2' border=1 >日期：</td><td class='c1' id='BYD_JC01_12-D2' ></td><td class='c1' id='BYD_JC01_12-E2' ></td><td class='c1' id='BYD_JC01_12-F2' ></td><td class='c1' id='BYD_JC01_12-G2' ></td></tr><tr id='BYD_JC01_12-3' style='height:27.0px'><td class='c2' id='BYD_JC01_12-A3' >序号</td><td class='c3' id='BYD_JC01_12-B3' >会计科目</td><td class='c3' id='BYD_JC01_12-C3' >科目名称</td><td class='c3' id='BYD_JC01_12-D3' >CMS期末余额</td><td class='c3' id='BYD_JC01_12-E3' >SAP期末余额</td><td class='c4' id='BYD_JC01_12-F3' >差额</td><td class='c5' id='BYD_JC01_12-G3' >备注</td></tr><tr id='BYD_JC01_12-4' style='height:27.0px'><td class='c1' id='BYD_JC01_12-A4' ></td><td class='c1' id='BYD_JC01_12-B4' ></td><td class='c1' id='BYD_JC01_12-C4' ></td><td class='c6' id='BYD_JC01_12-D4' ></td><td class='c6' id='BYD_JC01_12-E4' ></td><td class='c6' id='BYD_JC01_12-F4' ></td><td class='c1' id='BYD_JC01_12-G4' ></td></tr></table>";
}
</script>
</head>
<body>
<input type='button' text='import' onclick="import1()"/>
<div id="viewDiv"></div>
</body>
</html>
在IE8下，显示无边框，但是直接在body中直接显示样式及表格就能显示边框。
起因是做一个报表系统，EXT AJAX获取后台自动生成报表对应的HTML后，调用Panel的update方法，发现IE8下表格无边框，后来用HTML-》DIV.innerHTML同样存在一样的问题，求解
...全文
请发表友善的回复…
发表回复
Go 旅城通票 2015-10-27
- 打赏
- 举报
IE8设置容器innerHTML加载style标签无效，css内容放入style标签里面，html代码才是设置容器innerHTML
参考： javascript动态添加css类到style标签中
萍唲 2015-10-27
- 打赏
- 举报
style 写在head里。
在用innerHTML试试。
