锐客网

  1. 首页 > 生活百科 > it技术 > >

为什么Android Chrome中的边框会消失（）

androidIT知识为什么

幼敏悟过人，读书辄成诵。这篇文章主要讲述为什么Android Chrome中的边框会消失？相关的知识，希望能为你提供帮助。
我有这个按钮

.btn-feedback { padding: 5px 10px !important; } .btn-feedback { text-align: left; margin-bottom: 0; line-height: 1.45857; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border-width: 1px; border-style: solid; border-radius: 4px; } button, html input[type="button"], input[type="reset"], input[type="submit"]{ -webkit-appearance: button; } button, input, select, textarea { margin: 0; }

< button name="button" type="submit" class="btn-feedback"> Skip< /button>

虽然Google Chrome for Mac上的一切看起来都很正常：

【为什么Android Chrome中的边框会消失（）】当我在android上查看Google Chrome上的相同按钮时，它似乎缺少边框...

我不熟悉两个平台之间的渲染差异。有关如何修改我的样式的任何想法，以便Android Chrome上的按钮与Mac上的Google Chrome上的按钮相同？
答案缺少按钮边框的样式。如果您没有明确说明边框颜色样式，您将获得设备浏览器用户代理为您提供的样式。

.btn-feedback { padding: 5px 10px !important; } .btn-feedback { text-align: left; margin-bottom: 0; line-height: 1.45857; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; /*Explicitly add a color for the border. I have also used shorthand for border style color and width*/ border: 1px solid #444; border-radius: 4px; } button, html input[type="button"], input[type="reset"], input[type="submit"]{ /*Add all the prefix versions for the different browser types*/ -webkit-appearance: button; -moz-appearance: button; appearance: button; } button, input, select, textarea { margin: 0; }

< button name="button" type="submit" class="btn-feedback"> Skip< /button>

另一答案在WebKit（和Blink）引擎中，< button> s获得-webkit-appearance:button; 默认样式。
-webkit-appearance:button为按钮提供了外观和感觉（见下文），并且取决于平台。
您可以将其应用于其他元素：

.webkit-appear-button { -webkit-appearance:button; }

< button> I'm a button< /button> < span class="webkit-appear-button"> I'm a span, but look like a button< /span>


    推荐阅读


    上一篇：使用Live Id从Universal App登录到Web Api

    下一篇：在android中动态添加按钮的问题