block is not working without DOCTYPE in IE

2018-06-27 01:34:29

I want a data block whose width and height must be adjusted to inside content of the data block automatically.I did it by putting content inside a DIV tag whose display style as inline-block . Its working fine in all browsers if DOCTYPE tag is present. If DOCTYPE is not there,It not working in IE(The div width is adjusted to width of the browser).But it works in other browsers. Is there any solution or any alternative.... ? Can any body please help me....

Here is my piece of code

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
   .MultiSelectMenu{
     border:1px solid black;
     display:inline-block;
    }
   .MultiSelectMenu ul{
     margin:0px;
     padding:0px;
   }
  .MultiSelectMenu ul li{
    list-style:none;
    background:#abc4c9;
    border-bottom:1px solid #354e53;
    padding:2px 4px 2px 4px;
    cursor:pointer;
  }
  </style>
 </head>

 <body>
   <div class="MultiSelectMenu" >
     <ul>
       <li>Telugu</li>
       <li>Hindi</li>
       <li>English</li>
       <li>Marathi</li>
       <li>Kannada</li>
       <li>Malayalam</li>
     </ul>
  </div>
 </body>
</html>

Add

   .MultiSelectMenu { float: left; }

and set clear: left on the element right after the div element.

you can add Left Float to the .MultiSelectMenu and when you are done with the divs.. add empty div just after the closing tag of the last .MultiSelectMenu div that has clear:both or left style to clear the divs floats.

for eg:

.clear {
  clear:both; // or left
}

html:

<div class="clear"></div>

链接地址: http://www.djcxy.com/p/75670.html

上一篇: 中心对齐div与内联

下一篇: 在IE中没有DOCTYPE的块不起作用