关于html的小bug

废话不说 看代码 因为最近比较忙  所以不闲聊了啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bug</title>
    <style type="text/css">
        *{margin: 0px; padding: 0px; border: 0;}
        body{padding: 100px;}
        div{width: 800px; margin: auto;}
        input{ display: inline-block; width: 300px; height: 36px; line-height: 36px; font-size: 24px; border: 1px solid red;  vertical-align: top;}
        a{ display: inline-block; width: 300px; height: 36px; line-height: 36px; background: green; font-size: 24px; text-align: center; color: #fff}
    </style>
</head>
<body>
    <div>
        <input type="text">
        <a href="">百度一下</a>
    </div>
</body>
</html>

看一下 火狐 和谷歌的截图 看一下下边要说的bug（2）个

火狐截图为下：

谷歌截图为下：

第一他们的对其方式不是很一样。。。     是因为这两个浏览器的渲染的vertical-align 属性不同  在火狐下边是bottom  在谷歌是top 

第二最诡异的事情发生了  你会发现没有加margin 没有加padding 没有加定位的偏移  但是偏偏他们之间有空隙~~~~~

我只是想到了解决办法   但是不知道原因 求看到这篇文章的大神能回复一下我的 原因   解决方案就是 把html 的input 和 a标签放到一行中就可以了   自己试试吧。。。。坐等大神回复。。。

 

posted @ 2015-08-17 10:58  请低下头  阅读(376)  评论(0)  编辑  收藏  举报