问题
部署好的项目在chrome中打开,出现了黑色边框。界面用的是elementUI,使用抽屉组件是出现了这种情况,其他的表单组件均正常
原因
通过搜索资料,确定是chrome浏览器本身问题。
资料显示这是最近chrome浏览器更新83新版本产生的问题:
Chrome83版本对表单控件进行了视觉效果的更新,当文本输入框处于焦点以及选定下拉菜单中的选项时,浏览器会在它们周围显示一个“黑框”,以突出表单中的这些内容。
后来在CSDN上看见有个童鞋发帖说:这个问题已经反馈给了Google,在Chrome84 Dev中已经将该问题解决,按道理说等84版本更新后问题就会消失。
然鹅…我去更新了84版本——
哎,黑框它还在…我们还是靠自己去解决吧~ - ~
方法 ① :
我们可以在每个表单控件的css样式中添加如下一行:
outline:none;
这行代码作用是去掉表单元素获取焦点后自动添加的边框.
方法 ② :(不推荐)
进入chrome浏览器的实验室界面修改相关设置。
地址为:chrome://flags/#form-controls-refresh (当然用chrome打开)
进行如图设置,禁用掉 Web Platform Controls updated UI 这项更新,然后重启chrome即可。
这个方法治标不治本,你无法修改客户打开网页所使用的浏览器。在其他电脑上仍会有问题。方法1才是真爱。
本文章参考链接:https://blog.csdn.net/JZevin/article/details/107371372