Excelを介してファイルから読み込む場合、IE11ではカスタムHTMLの箇条書きが機能しません

debugcn 投稿 Dev

jptk

テンプレート化されたHTMLを使用してIEタブ内でプレビューできるExcelツールを作成しようとしています。Excelフォームを使用してHTMLファイルを作成します。このファイルはローカルに保存され、IEのインスタンス内に移動します。

残念ながら、ファイルからコードをロードするとコードは機能しません（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>

SS IE11