Les balises HTML personnalisées ne fonctionnent pas dans IE 11 lors du chargement à partir du file via Excel

J'essaie de créer un outil Excel qui permet aux gens d'utiliser le HTML modélisé et de l'apercevoir dans un onglet IE. J'utilise le formulaire Excel pour créer un file HTML, qui est enregistré localement et navigué dans une instance d'IE.

Malheureusement, le code ne fonctionne pas lorsque je le charge du file (il semble ignorer le li:before coiffage), mais il semble fonctionner bien dans Chrome et bien dans IE ici .

J'utilise les CSS / HTML suivants:

 <!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> <! DOCTYPE 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> position: absolue; <!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> couleur: # 555; <!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> font-size: 13px; <!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> </ style> <!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> </ body> <!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>

Des idées?!?!

METTRE À JOUR:

Après avoir simplifié le code ci-dessous, l'save dans un file text et l'ouvrir dans IE 11, il ressemble à ceci:

problème 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> <! DOCTYPE html> <!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> position: absolue; <!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> </ style> <!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> </ body> <!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>

Découpez votre code sur les bases, ça marche, regardez:

Snippet avec 2 options absolute et relative sur ::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 } position: absolue; 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>

Vous pouvez le faire en utilisant li: avant class avec contenu: '-' règle dans votre CSS.

 li:before{ position:aboslute; margin-right:1em; content:'-'; }

Et utilisez simplement une list simple et non ordonnée dans votre code HTML

 <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>

C'est un violon avec le code de travail: http://jsfiddle.net/pcda1dt6/3/