rest.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:;
padding:;
border:;
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:;
}
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:;
}
例如像body这样的元素在不同浏览器中,padding值是不一样的,这样在不同浏览器中显示效果就会有差异
https://meyerweb.com/eric/tools/css/reset/
开发项目时结合styled-components,设置为全局样式
import {createGlobalStyle} from 'styled-components';
export const GlobalStyled = createGlobalStyle`
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;
}`
import React from 'react';
import {GlobalStyled} from './style.js'; function App() {
return (
<div className="App">
<GlobalStyled/>
App
</div>
);
} export default App;
rest.css解决不同浏览器元素默认样式不同的问题的更多相关文章
- 重置浏览器的默认样式(css reset)
(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...
- css重设样式_清除浏览器的默认样式
由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一. 收集的默认样式的链接地址: 1.eric-meyer-reset ...
- Cannot read property 'nodeType' of null; audio元素默认样式下载按钮
1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...
- css去除webkit内核的默认样式
做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和sel ...
- CSS 解决z-index上层元素遮挡下层元素点击事件问题
解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 需求 ...
- CSS消除button标签的默认样式
button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...
- css取消input、select默认样式(手机端)
IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...
随机推荐
- Chapter 02—Creating a dataset(Part3-补充材料Stat/Transfer)
Stat/Transfer:在电子表格(worksheet),数据库(database),统计包(statistical package)间进行数据转换,具有简单高效的特点. 资料来源于:http:/ ...
- python小知识课堂
啦啦啦 with上下文管理 __class__和type的关系
- jsp 实现修改和删除功能
main.jsp 实现查询 在此界面快捷方式到修改界面 点击修改 会把数据传递到exit.jsp 修改 edit.jsp 前面数据: 数据库: /* Navicat Premium Data ...
- 月下无限连?拒绝无休止switch!
拒绝无休止switch 一.前言 前天碰到个需求,其实很简单,就是Excel导入,Excel模板长下面这样: 按我平常的逻辑是这样做的: 用文件输入流读取Excel,根据Excel的版本生成不同的对象 ...
- netty的调优-及-献上写过注释的源码工程
Netty能干什么? Http服务器 使用Netty可以编写一个 Http服务器, 就像tomcat那样,能接受用户发送的http请求, , 只不过没有实现Servelt规范, 但是它也能解析携带的参 ...
- 【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图【华为云技术分享】
[摘要] 本节中,我们以今日头条为例来尝试通过分析Ajax请求来抓取网页数据的方法.这次要抓取的目标是今日头条的街拍美图,抓取完成之后,将每组图片分文件夹下载到本地并保存下来. 1. 准备工作 在本节 ...
- 华为鲁勇:5G+云+AI三大核心引擎将驱动广州数字经济发展
[摘要] 华为云将携手广州政企,全面释放 5G+云+AI新动能,推动广州步入高质量发展新阶段. [中国,广州] 广州是一座多样化的城市,在历史上被誉为千年的商都,现在,广州也在持续的开放.融合.与时俱 ...
- MVC方法的返回值类型
MVC方法返回值类型 ModelAndView返回值类型: 1.当返回为null时,页面不跳转. 2.当返回值没有指定视图名时,默认使用请求名作为视图名进行跳转. 3.当返回值指定了视图名,程序会按照 ...
- [TimLinux] JavaScript 模态框可拖动功能实现——原始版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【搞定Jvm面试】 Java 内存区域揭秘附常见面试题解析
本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb ([Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错 ...