8

約

この質問は何度も聞かれましたが、少し違うことに気付きました。以下を参照してください。

標準情報:

  • FF での弾丸表示
  • IE で箇条書きが表示されない

発見

  • ;<ul>ではなく要素にhasLayout を設定すると、箇条書きは消えます。<li>これは、*{zoom:1} を実行するときによく行われます。

Internet Explorer の Firebug

UL:

backgroundAttachment       "scroll" 
backgroundColor            "transparent" 
backgroundImage            "none" 
backgroundRepeat           "repeat" 
borderBottomColor          "#000000" 
borderBottomStyle          "none" 
borderBottomWidth          "medium" 
borderCollapse             "separate" 
borderColor                "#000000" 
borderLeftColor            "#000000" 
borderLeftStyle            "none" 
borderLeftWidth            "medium" 
borderRightColor           "#000000" 
borderRightStyle           "none" 
borderRightWidth           "medium" 
borderStyle                "none" 
borderTopColor             "#000000" 
borderTopStyle             "none" 
borderTopWidth             "medium" 
borderWidth                "medium" 
bottom                     "auto" 
clear                      "none" 
color                      "#000000" 
cursor                     "move" 
direction                  "ltr" 
display                    "block" 
fontFamily                 "tahoma, arial, helvetica, sans-serif" 
fontSize                   "0.9em" 
fontStyle                  "normal" 
fontVariant                "normal" 
fontWeight                 400 
height                     "auto" 
left                       "auto" 
letterSpacing              "normal" 
lineHeight                 "normal" 
listStyleImage             "none" 
listStylePosition          "outside" 
listStyleType              "disc" 
margin                     "auto auto auto 30pt" 
marginBottom               "auto" 
marginLeft                 "30pt" 
marginRight                "auto" 
marginTop                  "auto" 
maxHeight                  "none" 
maxWidth                   "none" 
minHeight                  "auto" 
minWidth                   "auto" 
overflow                   "visible" 
padding                    "0px" 
paddingBottom              "0px" 
paddingLeft                "0px" 
paddingRight               "0px" 
paddingTop                 "0px" 
pageBreakAfter             "auto" 
pageBreakBefore            "auto" 
position                   "static" 
right                      "auto" 
tableLayout                "auto" 
textAlign                  "left" 
textDecoration             "none" 
textIndent                 "0pt" 
textTransform              "none" 
top                        "auto" 
unicodeBidi                "normal" 
verticalAlign              "auto" 
visibility                 "inherit" 
whiteSpace                 "normal" 
width                      "auto" 
wordSpacing                "normal"

リ:

backgroundAttachment       "scroll" 
backgroundColor            "transparent" 
backgroundImage            "none" 
backgroundRepeat           "repeat" 
borderBottomColor          "#000000" 
borderBottomStyle          "none" 
borderBottomWidth          "medium" 
borderCollapse             "separate" 
borderColor                "#000000" 
borderLeftColor            "#000000" 
borderLeftStyle            "none" 
borderLeftWidth            "medium" 
borderRightColor           "#000000" 
borderRightStyle           "none" 
borderRightWidth           "medium" 
borderStyle                "none" 
borderTopColor             "#000000" 
borderTopStyle             "none" 
borderTopWidth             "medium" 
borderWidth                "medium" 
bottom                     "auto" 
clear                      "none" 
color                      "#000000" 
cursor                     "move" 
direction                  "ltr" 
display                    "block" 
fontFamily                 "tahoma, arial, helvetica, sans-serif" 
fontSize                   "0.9em" 
fontStyle                  "normal" 
fontVariant                "normal" 
fontWeight                 400 
height                     "auto" 
left                       "auto" 
letterSpacing              "normal" 
lineHeight                 "normal" 
listStyleImage             "none" 
listStylePosition          "outside" 
listStyleType              "disc" 
margin                     "auto" 
marginBottom               "auto" 
marginLeft                 "auto" 
marginRight                "auto" 
marginTop                  "auto" 
maxHeight                  "none" 
maxWidth                   "none" 
minHeight                  "auto" 
minWidth                   "auto" 
overflow                   "visible" 
padding                    "0px" 
paddingBottom              "0px" 
paddingLeft                "0px" 
paddingRight               "0px" 
paddingTop                 "0px" 
pageBreakAfter             "auto" 
pageBreakBefore            "auto" 
position                   "static" 
right                      "auto" 
tableLayout                "auto" 
textAlign                  "left" 
textDecoration             "none" 
textIndent                 "0pt" 
textTransform              "none" 
top                        "auto" 
unicodeBidi                "normal" 
verticalAlign              "auto" 
visibility                 "inherit" 
whiteSpace                 "normal" 
width                      "auto" 
wordSpacing                "normal"


<ul>箇条書きを変更するようにレイアウトを設定する理由は何ですか?
マージン/パディングかもしれないと思ったのですが、IEのFirebugはhasLayoutなしで同じことを示しています。


ベアページの例:

   <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   <html>
   <head>
      <title>Default</title>
      <style type="text/css" media="all">ul {zoom:1;}</style>
   </head>
   <body>
      <ul>
         <li>foo</li>
         <li>bar</li>
         <li>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
         </li>
      </ul>
   </body>
   </html>

IE7 で上記を試してくださいzoom:1。
注: これは hasLayout を扱うため、IE の他のバージョンが影響を受ける可能性があります。

4

2 に答える 2

12

私が見つけた：

  • 設定li {margin-left: 1em}はトリックを行います
  • {margin-left:9px}弾丸の右端の端が見え始めます

もう 1 つの興味深い点は、リスト項目 ( ) で hasLayout をトリガーする<li>と、箇条書きが強制的にテキスト ブロックの下部に表示されることです。したがって、 のようなものを使用している場合は、上部*{zoom:1}に垂直方向に配置する必要があります。lili{vertical-align:top}

于 2010-10-21T16:00:55.650 に答える
1

ブラウザやブラウザのバージョンによって箇条書きの位置やサイズが異なるため、デフォルトの箇条書きの使用をやめ、画像に置き換えました。これにより、弾丸で発生したすべての問題が修正され、弾丸のサイズ、色、形状を簡単に変更できるようになりました。

ul{ 
    list-style-type: none;
    list-style-position: outside;
}
ul li{
    margin:0; 
    padding: 0 0 0 16px;
    background: url(bullet.gif) no-repeat left center;
}

画像が常に印刷されるとは限らないため、印刷の場合は、デフォルトの箇条書きを使用する css ファイルを追加できます。

これは番号付きリスト ( <ol>) では機能しないため、ul css セレクターを忘れないでください

于 2010-10-21T16:20:09.180 に答える