通过Excel从文件加载时，自定义HTML项目符号在IE 11中不起作用
我试图创build一个Excel工具，允许人们使用模板化的HTML，并在IE标签中进行预览。 我使用Excel的表格来创build一个HTML文件，这个文件保存在本地，并在IE的一个实例中导航。
不幸的是，代码不工作时，我从文件加载它（它似乎忽略li:before造型li:before ），但它似乎在Chrome中正常工作，罚款在IE浏览器。
我正在使用下面的CSS / HTML：
<!DOCTYPE html> <html> <frame name="prevHtml"> <head> <style media="screen" type="text/css"> body { font-size:14px; font-family: Helvetica; } h2 { font-size:14px; margin:10px 0px; font-family: Helvetica; } p { font-family: Helvetica; } ul { margin-left: 0; padding-left: 0; list-style-type: none; } li { position: relative; left: 1em; } li:before { position: absolute; left: -1em; content: "-"; } table.dims { font-size:14px; font-family: Helvetica; border-collapse: collapse; border:solid 1px #eee; border-bottom: 2px solid #eee; margin-bottom:30px; } table.dims tr:hover { background: #f4f4f4; } table.dims tr:hover td { color: #555; } table.dims td { padding:3px 12px 3px 12px; border-right:solid 1px #eee; font-size:13px; text-align:left } table.dims th { padding:5px 0px; text-align:left } .grey { background-color:#eee; } .links { background-color:#000; color:#fff; padding:6px; font-size:12px; margin-right:10px; } #bar { float:left; width:980px; margin-bottom:15px; } </style> </head> <body> <ul> -<li>item1</li> -<li>item2</li> -<li>item3</li> </ul> </body> </html>
有任何想法吗？！？！
更新：
在简化下面的代码之后，将它保存到一个文本文件中并在IE 11中打开它，如下所示：
CSS问题
<!DOCTYPE html> <html> <frame name="prevHtml"> <head> <style media="screen" type="text/css"> body { font-size: 14px; font-family: Helvetica; } ul { margin: 0; padding: 0; list-style-type: none; } .absolute li { position: relative; left: 1em; width: 99% /* add this [or another value that fits you best] to avoid horizontal scrollbar */ } .absolute li:before { position: absolute; left: -1em; content: "-"; } .relative li { /* position: relative; not needed in this case */ } .relative li:before { position: relative; content: "-"; margin-right:.6em } </style> </head> <body> <h1> absolute ::before </h1> <ul class="absolute"> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <hr /> <h1> relative ::before </h1> <ul class="relative"> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </body> </html>
剥离你的代码到基础，它的工作，看看：
片段与2个选项absolute和relative ::before
body { font-size: 14px; font-family: Helvetica; } ul { margin: 0; padding: 0; list-style-type: none; } .absolute li { position: relative; left: 1em; width: 99% /* add this [or another value that fits you best] to avoid horizontal scrollbar */ } .absolute li:before { position: absolute; left: -1em; content: "-"; } .relative li { /* position: relative; not needed in this case */ } .relative li:before { position: relative; content: "-"; margin-right:.6em }
<h1> absolute ::before </h1> <ul class="absolute"> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <hr /> <h1> relative ::before </h1> <ul class="relative"> <li>item1</li> <li>item2</li> <li>item3</li> </ul>
你可以在课堂上用content：' – '规则在你的CSS中实现。
li:before{ position:aboslute; margin-right:1em; content:'-'; }
只需在HTML代码中使用一个简单的无序列表即可
<ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>
这是一个工作代码的小提琴： http : //jsfiddle.net/pcda1dt6/3/