发表新帖
发表新帖

CSS Rendering inconsistency on ul with Firefox being the odd ball out

前端 未结
关注
6 1433
既然无缘
既然无缘 2021-02-01 18:03

Background

I was creating a secondary navigation menu using embedded unordered lists with anchors and headers. Using a CSS reset sheet all headers and anchors are set

相关标签:
6条回答
  • 轮回少年
    2021-02-01 18:38

    Because a heading is a block element and therefore gets pushed to the next line (since a block-level element displaying as block (or without an otherwise specified display-type [inline-block, inline, etc...] gets) can't share a line; I don't know if a list-element should (or shouldn't), according to spec, contain block level elements inside itself, or if it should be presumed to be 'sharing' the line with the contained element.

    I could be wrong, about all of this, though; it's just the only explanation I could think of.

    You may, also, find that there are default margins, padding or positioning being applied to the heading elements in Firefox. You could test with Firebug (or alternatives) to see where the positioning is coming from.

    edit

    After copy-pasting your code into my template file, and viewing in FF3.0.10 I don't see the problem you report. The resulting code I used is pasted below, if you haven't already resolved this, try the code, below, and see if the problem persists:

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title><link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css">
    /* css reset */
    h1, h2, h3, h4, h5, h6, a { display: block; }

    /* list styling */
    ul {  width: 14em; margin: 1em auto;}
  </style>

</head>

<body>

<ul>
  <li>
    <h3>Primary</h3>
    <ul>
      <li>
        <h4>Secondary</h4>
        <ul>
          <li>
            <h5>Tertiary</h5>
            <ul>        
              <li><a href="#">Tertiary Link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
<ul>


</body>

</html>
    0 讨论(0)
  • 南方客
    2021-02-01 18:39

    I tried both samples and experimented a bit myself.

    The differentiating factor is strangely "list-style-position". Somehow in FF, "inside" and "outside" have "inline" and "block" effects for the bullets.

    I can't tell you why, probably need to dig into the rendering engine.

    0 讨论(0)
  • 青春惊慌失措
    2021-02-01 18:40

    hotfix:

    .dpe-flexible-posts li::before{
    content: '●';
    position: absolute;
    left: -14px;
    top: -1px;
}
.dpe-flexible-posts li{
    list-style-type: none;
    position: relative;
}
    0 讨论(0)
  • 面向向阳花
    2021-02-01 18:48

    list-style: disc is interpreted as list-style: disc outside so I think that just avoids FF's layout problem instead of fixing it.

    I'm having some success with a workaround that sets the first-child of the list-item to display: inline, which puts the marker back in the right place:

    http://jsfiddle.net/6GhPT/2/

    I've seen the same incorrect rendering (list markers displayed above block children of list items) in IE ≤ 9, too.

    0 讨论(0)
  • 挽巷
    2021-02-01 18:55

    Update

    This is actually broken and has been since 2000. Still not fixed. I thought I had figured it out but it was a mistake on my part. STILL BROKEN! :(

    Answer

    Setting the CSS property of "list-style" to "disc" will cause the Firefox and Camino rendering engine, Gecko, to render the headers inside an unordered list "normal".

    Answer Background

    After following @o.k.w's advice of digging into the rendering engine I found that my problem had been reported on bugzilla.mozilla.org on April 22, 2000! (*Cough* Um, Mozilla... the bug is still there.) The reported bug at https://bugzilla.mozilla.org/show_bug.cgi?id=36854 discusses the fact that Mozilla's rendering engine, Gecko, has a problem displaying headers in an unordered list while displaying the list item marker inside. It also says about this problem:

    "This actually seems to be a major CSS1 compliance issue..." - David Baron

    At the bottom of the bug report thread there is a link a w3c.org document that led me to find my fix:

    "There is a description in a CSS 2.0 recommendation: http://www.w3.org/TR/CSS2/generate.html#q11 which tell us that Gecko behavior is faulty." - Listy Blaut

    At the bottom of that document there is a suggestion to set the CSS list-style to disc:

    ul        { list-style: disc }

    Setting the unordered list list-style to "disc" has "fixed" the rendering problem in Gecko rendering engine browsers, Firefox & Camino, while leaving the lists unchanged in other browsers. *Note: Although "disc" is a list-style-type property, if "list-style-type: disc" is used instead of "list-style: disc" it does not fix the problem.

    Solution Example Code

    <html>
<head>
    <style type="text/css">
        /* css reset */
        h1, h2, h3, h4, h5, h6, a { display: block; }

        /* list styling */
        ul { list-style-position: inside; list-style: disc;}
    </style>
</head>
<body>
     <ul>
        <li>
          <h3>Primary</h3>
          <ul>
             <li>
                <h4>Secondary</h4>
                <ul>
                  <li>
                     <h5>Tertiary</h5>
                     <ul>            
                        <li><a href="#">Tertiary Link</a></li>
                     </ul>
                  </li>
                </ul>
             </li>
          </ul>
        </li>
     <ul>
</body>
</html>

    How I feel finding the answer to my own question


    (source: michaelgrace.org)

    I can finally sleep ; )

    0 讨论(0)
  • 北荒
    2021-02-01 18:56

    Well, I've had same problem, but circle was not an option - I needed the decimal notation. After few minutes of research, I've found a perfect solution with

    ol { counter-reset: li; } ol li h4:before { content: counter(li) ". "; counter-increment: li; } On the element I want to append the list-style item (In my case it was ol>li>div>h3! It can be positioned relative/absolute also). Effect is great, number of item is perfectly concatenated with H3 content.

    I really suggest you to try this. Here is full tutorial: http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

    0 讨论(0)
 看不清?
提交回复
热议问题