您的位置：首页 > Web前端 > HTML

关于html的小bug

2015-08-17 10:58 615 查看

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

<!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标签放到一行中就可以了自己试试吧。。。。坐等大神回复。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航