What goes wrong when a display:inline custom element contains display:block elements?

Question

I\'m building a custom element to mark up examples (play with it at http://jsbin.com/kiboxuca/1/edit):

Answer 1

This is specified in section 9.2.1.1 of the CSS2.1 spec, which describes anonymous block boxes.

The description in the spec is pretty verbose, so I will not quote it here, but basically what happens is that the inline portions of your

element, including , are relocated into anonymous block boxes surrounding the

 block box. The "Some text " bit that precedes the  element is contained in its own anonymous inline box, while the  element generates its own inline box as usual, except that it is split into the anonymous block boxes that are generated around the 
 box.


While it might not make much sense for an inline box to contain a block-level box — after all, the spec does say to break it up into a bunch of anonymous boxes for the purposes of rendering — the behavior in such a case is very well-defined and therefore (or at least, it should be) reliable across browsers. You should not run into any problems aside from obscure browser bugs, of which there are none I am currently aware of, although Chrome has been known to act downright weird with a elements containing block boxes.

Here's an illustration:


  



  
    Some text 
    
      [ Example:
      Introduction
    
  

  
Some code here

  
    
      More example
      — end example ]
    
  




Note of course that the  element isn't actually split like that — the start and end tags in this illustration delimit the boxes that are generated, rather than the elements themselves. In terms of the shadow DOM, the 
 element is still considered a child of the  element, and the entire  element is still just one element.

    

             

                                                        
            

0 讨论(0)

发布评论:

提交评论

---

•  加载中...