欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

修正 input 标签 在 IE、chrome、Firefox浏览器下显示不一致的问题

程序员文章站 2022-07-01 12:51:14
...

处理前,效果如图:
修正 input 标签 在 IE、chrome、Firefox浏览器下显示不一致的问题
Chrome
修正 input 标签 在 IE、chrome、Firefox浏览器下显示不一致的问题
Firefox
修正 input 标签 在 IE、chrome、Firefox浏览器下显示不一致的问题
IE
如图所示,除了chrome ,Firefox 、IE 下,输入框 的上边和左边均有黑色阴影,为了让他们效果一致,我们来为 input 标签,人为设定一个 border 样式 ,不使用浏览器默认的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <style>
        input {
            border:1px solid #cfcfcf;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

效果如下:
修正 input 标签 在 IE、chrome、Firefox浏览器下显示不一致的问题
效果一致了。。。