发表新帖
发表新帖

Why are inline-block elements not displayed correctly in Internet Explorer 8?

前端 未结
关注
5 610
暖寄归人
暖寄归人 2020-12-15 07:14

I have the following code:


  


        

                      

              相关标签:
       

      

      
      

        

          5条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  广开言路        
                
              
    
                            
    
                2020-12-15 07:30
              
    
            
    
            
    
                                                                       

    The old versions of IE don't understand the inline-block for block-level elements.
    


    The reason why inline-block works for inline elements is because they did it so it triggers hasLayout. And the has layout for inline elements works exactly like an inline-block.
    


    So, to make inline-block work with block-level elements, make them inline and somehow trigger the hasLayout, like, using zoom: 1.
    


    So, for you code, there are two ways: change divs to spans, or add inline hacks (or move the code to external stylesheets and use conditional comments). The version with inline hacks would look like this:
    


    <div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />were
  </div>
</div>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  庸人自扰        
                
              
    
                            
    
                2020-12-15 07:34
              
    
            
    
            
    
                                                                       

    Try this
    


    <style type="text/css">
.one {
  width: 200px; 
  border: 1px solid black;
}
.two {
  display: -moz-inline-box; 
  display: inline-block; 
  width: 70px; 
  border: 1px solid green;
}
* html .two {
  display: inline;
}
* + html .two {
  display: inline;
}
</style>
<div class="one">
  <div class="two">
    asdfasdf<br />asdf
  </div>
  <div class="two">
    asdfasdf<br />were
  </div>
</div>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  逝去的感伤        
                
              
    
                            
    
                2020-12-15 07:36
              
    
            
    
            
    
                                                                       

    IE < 8 cannot switch elements that are block by default to inline-block elements. No matter how hard you try, they will always remain block unless you use float IIRC.
    


    In your example it seems that you do not need to use a <div>. If this is the case, why not use a <span> or an element that is inline by default. Otherwise,  floating is the answer.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  情话喂你        
                
              
    
                            
    
                2020-12-15 07:43
              
    
            
    
            
    
                                                                       

    display: inline-block;
*zoom: 1;
*display: inline;
    


    you can add inline-block for other browser but for IE you can add style with *. it only works in ie
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  挽巷        
                
              
    
                            
    
                2020-12-15 07:45
              
    
            
    
            
    
                                                                       

    Changing the doc type worked for IE
    


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复
热议问题