css - inline-block to span 标签在 IE 和 webkit-browsers 中的行为不同

Question

display:inline-block to spantag 在不同的浏览器中表现不同。在 IE 浏览器中它可以完美运行。span但是在 webkit-browers(Chrome, Safari, etc..) 中，和它的子标签之间有一点差距。
这是示例代码：

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

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

在不同浏览器
IE

Chrome 和 Safari中输出

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

Answer 1

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

span input {
    margin:0px;
}

演示