zoukankan      html  css  js  c++  java
  • 关于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标签放到一行中就可以了   自己试试吧。。。。坐等大神回复。。。

  • 相关阅读:
    APP测试整理
    Ubuntu18.04搭建测试环境
    Ubuntu18.04完全卸载mysql5.7
    Ubuntu18.04部署禅道系统
    mysql数据库创建用户、赋权、修改用户密码
    Chrome浏览器查看cookie
    APP测试之日志分析
    计算机网络知识之TCP/IP协议簇
    关于博客园cnblogs图片显示模糊失真问题
    Jmeter脚本录制攻略
  • 原文地址:https://www.cnblogs.com/ling-du/p/4736043.html
Copyright © 2011-2022 走看看