小程序

小程序如何去掉user agent stylesheet?

2020-09-30

小程序如何去掉user agent stylesheet?

有时候小程序页面的组件样式不是自己想要的,查看调试器右侧style面板中style样式,发现了我从未定义过的样式,来自user agent stylesheet。

user agent stylesheet将被你在自己的css中设置的任何内容覆盖。它们只是最底层:在没有页面或用户提供的任何css的情况下,浏览器仍然必须以某种方式呈现内容。

小程序默认样式.png


解决方案1:

去掉app.json中的  "style":"v2",

去掉这个能解决大部分问题,但是我遇到一个按钮圆角还是没解决,其次,既然小程序带上这个了,说明应该有用的把,去掉这个有没有别的不好的影响呢,还不知道。可以跟下面的办法配合使用。

去掉小程序默认样式


解决方案1:

由于user agent stylesheet的优先级很低,自己写样式覆盖即可。在你的css中添加被user agent stylesheet所覆盖了的样式。


解决方案2:

写reset.css或者normalize.css

目的:减少浏览器在默认行高,边距和标题字体大小等方面的不一致性。

比如网页中示例reset.css的代码

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}