- 浏览: 1431380 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
css reset revisit
- 博客分类:
- xhtml / css
正如 javascript 兼容库的作用, css reset 也扮演着类似的角色,css reset 保证了各个浏览器最基本元素渲染的一致性和统一性 ,从而减少在构建复杂界面过程中遇到各个浏览器出现不同展现的问题。以前对于 css 框架关注比较少,而近来随着 bootstrap 以及 lesscss 等的出现,使得构建 css 框架也开始成为一种必要。那么先从 css reset 开始吧。
css reset 从最早的
* {margin:0;padding:0;}
到简单实用的 YUI cssreset ,再到目前流行的 normalize.css . 趋势是越来来细化,越来越尊重浏览器自带的默认样式 ,而不是简单得完全重置掉,例如 ul (padding margin list-type), strong (font-weight), h1~h6(font-size)。这次综合参考 normalize.css , bootstrap , KISSY cssreset ,在构建新的 css reset 时也遇到了不少浏览器差异问题,值得记录。
注:构建过程采用 lesscss
构建过程
html5 元素
目前老版本 ie 通过 html5shim 等也可以使用 html5 标签,但是一个问题就是虽然可以使用,但是新标签没有样式,那么就需要对 html5 的标签重新定义样式,例如:
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { .ks-inline-block_(); } mark { background: #ff0; color: #000; } figure { margin: 1em 40px 1em 40px; }
其中 mark figure 参照 chrome 的自带样式,尊重浏览器的默认样式.
而其中 audio 元素在不同浏览器渲染也有差异,当 audio 不带 controls 属性时,除了 ios safari 其他浏览器 width/height 都是 0,那么这时需要显示设置下
audio:not([controls]) { height: 0; width:0; }
可以使用 ios safari 访问以下链接:
基本字体与大小
默认字体大小一般是 16px,过大,一般设置为12px。
默认字体在中文环境下,chrome 为 simsun 而其他浏览器为 new times,推荐统一为 tahoma, arial, simsun, sans-serif;
页面背景色除了 chrome 外用 js 获取都是 transparent,为了一致性,简单设置为 #fff 即可,字体颜色也对应白色统一为 #222.
line-height 默认比较诡异,firefox 大概为 1.3,其他大概为 1.13,统一为 1.5 即可.
body margin 默认情况下 ie8- 为 10px,而其他浏览器为 8px,一般 body 不需要 margin,设置为 0 比较好.
input/button 等表单控件比较特殊,默认情况不继承父元素的 font-family 以及 font-size,需要手动设置表单控件的 font-family 为页面字体,font-size 为 100% 继承父元素大小.
ios safari 中 从 portrait 转到 landscape 会导致字体大小调整,通过设置 text-size-adjust 可防止调整(现实为仍然少量调整,双击恢复正常)
例如:
html { font-size: @baseFontSize; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } html, button, input, select, textarea { font-family: @baseFontFamily;/* 1 */ } button, input, select, textarea { font-size: 100%; } body { margin: 0;/* 1 */ color: @textColor; background-color: @bodyBackground; /* 2 */ line-height: @baseLineHeight; /* 3 */ }
链接
链接色一般来说应该设置一个统一的颜色,为了美观取消下划线,以及 hover active 时的虚线框,但是为了可访问性,需要保留聚焦时的虚线框,需要注意的是 chrome 聚焦是比较突兀的黄线框,需要统一设置为和其他浏览器一样的细虚线框
例如:
a { color: @linkColor; text-decoration: none; &:focus { outline: thin dotted; } &:active, &:hover { outline: 0; } &:hover { color: @linkColorHover; } }
其他元素字体与排版
h1,h2 等在标准浏览器字体相对父元素有变化,而在 ie67 中则是固定的大小,并且 margin 边距也不一样,则需要在 reset 中手动指明下
例如:
h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; }
abbr 当有 title 属性时,在 ie789 以及 chrome 底部没有虚线
需要手动加上虚线(ie6 不支持)
abbr[title] { border-bottom: 1px dotted; }
b strong 在 firefox 以及 ie89 下默认为 bolder 样式
最好设置为 bold
b,strong { font-weight: bold; }
blockquote 在 ie67 下上边距为 0, 而其他浏览器都为 1em
blockquote { margin: 1em 40px; }
dfn 在 safari5 下不为斜体
dfn { font-style: italic; }
p,pre 在 ie67 下外边距为 0,其他浏览器则为 1em
p, pre { margin: 1em 0; }
code/pre/samp 和 form 控件类似,不继承父元素字体和大小,需要给与合适的字体
code, kbd, pre, samp { font-family: monospace, serif; /* 1 */ font-size: 1em; /* 2 */ }
pre 默认不会自动换行,加上自动换行比较好,而 ie 需要不同的属性
pre { white-space: pre; white-space: pre-wrap; /*ie*/ word-wrap: break-word; }
q 元素 ie67 下两边不支持双引号,为了一致性,需要在其他浏览器中取出双引号
q { quotes: none; } q:before, q:after { content: ''; content: none; }
small 同 h1, 在 ie67 下相对大小错误
small { font-size: 75%; }
sup/sub 默认情况下除了 firefox 都会影响当前行的行高,可使用其他的方法避免
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; }
列表
ul/li/dd 在 ie6,7 下外边距和内边距错乱
dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } menu, ol, ul { padding: 0 0 0 40px; }
img/svg
ie 当 img 在链接内时会导致出现边框
img { border: 0; }
ie9 中内嵌的 svg 不是默认 overflow hidden,导致包含的元素会超过 svg 元素区域
svg:not(:root) { overflow: hidden; }
表单元素
form 外边在 ie789 获取为 auto,实际应为 0
form { margin: 0; }
fieldset 各个浏览器存在差异
可统一为 chrome 内置样式
fieldset { border: 2px groove #f0f0f0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend ie 存在差异
可手动处理
legend { border: 0; /* 1 */ margin:0; padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ }
form 控件一系列问题: textarea 在 ie 下默认存在滚动条,button/input 各个浏览器 margin 不一致, ie button 左右无内边距, firefox button 默认带有内边距
button, input, select, textarea { margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /* * 1. Removes default vertical scrollbar in IE6/7/8/9. * 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* * IE6+ need padding-left/right */ button { padding: 0px 6px; /* ie6 fix*/ _padding: 0; } /* * Removes inner padding and border in FF3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
checkbox radio 在 ie8,9 下 box-sizing 默认为 content-box 并且 ie 有多余的padding
ie6 无法修复
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }
search input 仅 chrome 支持,关键是 chrome 下 box-sizing 为 border-box,其他浏览器都和 text 保持一致为 content-box,目前为了一致性只能禁止 chrome 的表现。
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } /* * Removes inner padding and search cancel button in S5, Chrome. */ input[type="search"] { &::-webkit-search-cancel-button, &::-webkit-search-decoration { -webkit-appearance: none; } }
表格
统一为更常用的合并边框模型
table { border-collapse: collapse; border-spacing: 0; }
最终效果
在 normalize.css 对应 demo 的最终效果
发表评论
-
cubic-bezier 模拟实现
2013-01-05 16:34 14008cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
兼容 ie 的 transform
2012-02-23 14:00 6327css 2d transform 是 css3 引入的一个新的 ... -
write html parser
2011-12-01 02:48 2842首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2779简介 如果你经 ... -
fixed 定位 auto 问题
2010-12-02 11:58 2040当一个元素被 fixed 定位 ... -
css的优先级与继承
2010-11-08 12:30 3646起因: 很早就听 ... -
浏览器渲染
2010-10-12 21:07 0http://snook.ca/archives/html_a ... -
背景图样式回顾
2010-09-30 13:51 1741正式点叫 background-image recap ,最近 ... -
mhtml datauri 与 css expression
2010-09-29 18:17 2347mhtml ,datauri ,css expressio ... -
margin合并整理
2010-06-23 11:25 4142多个段落为了美观,浏览器会将它们的垂直距离变得统一,这是一种很 ... -
编写跨浏览器兼容的 CSS 代码的金科玉律
2010-06-09 13:26 0作为 Web 设计师,你的 ... -
图片优化 and dataURI and mhtml for ie<8
2010-04-28 10:00 0http://www.phpied.com/data-uris ... -
W3C XML Schema 与文档类型定义 (DTD) 比较
2010-02-01 23:50 0http://www.ibm.com/developerwor ... -
xtml与html
2010-02-01 23:26 0HTML与XHTML 二者有什么区别,你觉得 ... -
获取css属性计算值问题
2010-01-29 23:11 3740都知道标准浏览器可以用 getComputedStyle 以及 ... -
垂直居中问题解释整理
2009-12-06 01:19 2236垂直居中曾经很热的话题,也转过网络一些好的解决方案: ... -
有趣的z-index
2009-12-01 00:25 2792实践 : 注:firefox 示例1 ... -
css列布局整理
2009-11-27 01:14 1641对一些经典的布局进行整理,以及修改去除不必要的hack,兼容 ... -
ebay ppt.rar
2009-11-18 15:23 0ebay ppt.rar -
浏览器与服务器缓存
2009-11-13 16:31 0Etag和Expires 题记:本文对页面中Etag和Exp ...
相关推荐
Introductory Chapter_ A Revisit to Optical Amplifiers
Rethink, Revisit, Revise A Spiral Reinforced Self-Revised Network for Zero-Shot Learning_重新思考、重新审视、修订一个螺旋强化的自我修订网络,用于零射击学习.pdf
(Colored ICP算法)ICCV2017_Colored Point Cloud Registration Revisited1
港股公司研究
客户沟通重访这个项目的其他东西服务器端 ui 客户端
Create React App入门该项目是通过引导的。可用脚本在项目目录中,可以运行:npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
revisit-severson-et-al.ipynb :包含大部分分析和图形生成的Python笔记本。 image_annotated_heatmap.py :来自matplotlib的辅助函数(请参阅docstring获取源代码)。 此外,我们在nn_models目录中使用了三个...
回顾git命令和github
: :red_square: 完全中断该存储库包含由支持的的开源正常运行时间监控器和状态页面。 借助 ,您可以获得自己不受限制的免费正常运行时间监控器和状态页面,该页面完全由GitHub存储库提供支持。...
As there exists an inconsistency in claiming the symmetrical relations in the 16 Mueller matrix elements used to describe a turbid medium, the author restudies the symmetrical relationships between ...
附有论文供参考:[Revisit Long Short-Term Memory: An Optimization Perspective],NIPS 深度学习研讨会,2014。 #特征- 原始的长期短期记忆- 所有连接窥视Kong- CPU 或 GPU 加速- Mapreduce 并行化- 梯度检查- ...
This paper revisits the problem of designing switched observers for switched linear systems with unknown inputs. By performing a state and output coordinates transformation that decouples the unknown ...
3.3 Extractor CSS 从 CSS 里面提取链接。 3.4 Extractor JS 从 JS 里面提取链接。 3.5 Extractor PDF 从 PDF里面提起链接。 3.6 Extractor SWF 从 Flash里面提取链接。 3.7 Extractor Universal 最后一个链接提取器...
网络爬虫Web-Crawler 是使用最少的组件构建的HTTP 获取器页面提取器政策 - PageFetch、重访访问过的 URL 消除器数据存储为了解析页面,使用了 Jsoup 库 ( ) 来解析 HTML。 这里给出的实现在以下方面与架构不同进程内...
The majority of this book covers package design principles.... Each letter of this acronym stands for a different principle, and we will briefly revisit them in the first part of this book.
We are going to revisit the XOR problem, but we’re going to extend it so that it becomes the parity problem - you’ll see that regular feedforward neural networks will have trouble solving this ...
In particular, we redesign generator normalization, revisit progressive growing, and regularize the generator to encourage good conditioning in the mapping from latent vectors to images. In addition...
LSTM-MATLAB is Long Short-term Memory (LSTM) in MATLAB, which is meant to be succinct, ... It is accompanied with a paper for reference Revisit Long Short-Term Memory An Optimization Perspective, NIPS
LSTM-MATLAB is Long Short-term Memory (LSTM) in MATLAB, which is meant to be succinct, ... It is accompanied with a paper for reference Revisit Long Short-Term Memory An Optimization Perspective, NIPS