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

处理前,效果如图:
在这里插入图片描述
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>

效果如下:
在这里插入图片描述
效果一致了。。。

猜你喜欢

转载自blog.csdn.net/weixin_45956258/article/details/103352908
今日推荐