zoukankan      html  css  js  c++  java
  • 适合移动端与PC端的 CSS Reset

    具体代码##

    @charset "utf-8";
    
    html {
    	-ms-text-size-adjust: 100%;
    	-webkit-text-size-adjust: 100%;
    	background: transparent;
    	color: black
    }
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, sumary {
    	margin: 0;
    	padding: 0;
    }
    body, button, input, select, textarea {
    	font: 12px 5b8b4f53, arial, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
    	font-size: 100%;
    	font-weight: 500
    }
    ol, ul {
    	list-style: none
    }
    input, select, textarea {
    	font-size: 100%;
    	-webkit-appearance: none;
    	appearance:none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0
    }
    th {
    	text-align: inherit
    }
    caption, th {
    	text-align: left
    }
    fieldset, img {
    	border: 0
    }
    img{
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    optgroup {
    	font-weight: bold
    }
    button, [type="button"], [type="reset"], [type="submit"] {
    	cursor: pointer
    }
    audio, canvas, progress, video {
    	display: inline-block
    }
    progress {
    	vertical-align: baseline
    }
    mark {
    	background-color: #ff0;
    	color: #000
    }
    iframe {
    	display: block
    }
    abbr, acronym {
    	border-bottom: none;
    	text-decoration: underline;
    	text-decoration: underline dotted
    }
    del {
    	text-decoration: line-through
    }
    address, caption, cite, code, dfn, em, th, var {
    	font-style: normal;
    	font-weight: 500
    }
    q:before, q:after {
    	content: ''
    }
    sub, sup {
    	font-size: 75%;
    	line-height: 0;
    	position: relative;
    	vertical-align: baseline
    }
    sup {
    	top: -0.5em
    }
    sub {
    	bottom: -0.25em
    }
    a:hover {
    	text-decoration: underline
    }
    ins, a {
    	text-decoration: none
    }
    a {
    	-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
    	-moz-tap-highlight-color: rgba(255, 0, 0, 0);
    	-ms-tap-highlight-color: rgba(255, 0, 0, 0);
    	tap-highlight-color: rgba(255, 0, 0, 0);
    	-webkit-touch-callout: none;
    	touch-callout: none
    }
    input,
    button {
        -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
        -moz-tap-highlight-color: rgba(255, 0, 0, 0);
        -ms-tap-highlight-color: rgba(255, 0, 0, 0);
        tap-highlight-color: rgba(255, 0, 0, 0);
    }
    a:focus, *:focus {
    	outline: 0
    }
    a:active, a:hover {
    	outline- 0
    }
    code, kbd, pre, samp {
    	font-family: monospace, monospace;
    	font-size: 1em
    }
    .clearfix:before, .clearfix:after {
    	content: "";
    	display: table
    }
    .clearfix:after {
    	clear: both;
    	overflow: hidden
    }
    .clearfix {
    	zoom: 1
    }
    .clear {
    	clear: both;
    	display: block;
    	font-size: 0;
    	height: 0;
    	line-height: 0;
    	overflow: hidden
    }
    .hide {
    	display: none
    }
    .block {
    	display: block
    }
    .fl, .fr {
    	display: inline
    }
    .fl {
    	float: left
    }
    .fr {
    	float: right
    }
    

    BUG 修复

    • 2018/09/09 为 input,button 增加同样的 tap-highlight-color 禁止高亮的属性。
    • 2018/08/27 使用 -webkit-text-size-adjust 来修复在以px字体单位时,字体大小的显示缩放问题。
    • 2017/02/23 修复 user-select:none 作用在form元素上导致表单控件在IOS下无法输入的bug
  • 相关阅读:
    Centos7源码安装mysql及读写分离,互为主从
    Linux简介及Ubuntu安装
    CentOS7 IP自动获取
    memcached总结
    CentOS7安装iptables防火墙
    centos 7.0 mono&Jexus V5.5.3安装
    设置背景模糊效果
    vue 动画过渡
    sticky footer
    设置最低高度为100%
  • 原文地址:https://www.cnblogs.com/HCJJ/p/6399185.html
Copyright © 2011-2022 走看看