Home > Article > Web Front-end > After setting inlineblock on a div, and then setting margin, why can't the input be moved to the side in IE6 7? _html/css_WEB-ITnose
After setting inlineblock on a div, and then setting margin, why can't the input be moved to the side in IE6 7? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:241325browse
Input will also have margin. Why is this so?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.yi { border: 1px solid #000; display: inline-block; margin-left: 50px; }</style></head><body><div class="yi"> <input name="" type="text" /></div></body></html> Reply to discussion (solution)
display: inline-block;
This is the reason. Setting it like this can make the div have Layout, many bugs under ie67 are caused by layout.
As for why this setting affects the input element (the input element itself has layout in ie67)
I tested it myself and found that this only happens when both the parent and child elements have layout, and the child element still has layout. Only when input and textarea are two elements that have their own layout, the margin-left attribute of the parent element will be inherited. This is really incomprehensible! !
Looking forward to the appearance of the master!