css - inline-block to span 标签在 IE 和 webkit-browsers 中表现不同

Question

display:inline-block 到 span 标签在不同的浏览器中表现不同。在 IE 浏览器中，它工作得很好。但是在 webkit-browers(Chrome，Safari 等)中，span 和它的子标签之间有一点差距。
这是示例代码:

     <style>
       span{
         display:inline-block;
         border:1px solid red;
         padding:0px;
         margin:0px;
        }
     </style>

      <span>
          <input type="text"/>
       </span>

不同浏览器的输出
IE

Chrome 和 Safari

看到跨度和输入字段之间有差距...

Answer 1

你应该使用这个选择器，因为 margin 在 span 和 input 之间，而不仅仅是 span，所以你需要定位 input 元素而不是 span 元素

span input {
    margin:0px;
}

Demo