小心：CSS代码书写顺序不同，导致显示效果不一样

无意中发现，针对同一HTML标记，在CSS中同时应用了font和line-height属性时，就得小心了，这二者的书写顺序不一样，会导致显示效果不同。
即：
>>> 如果先写font，再写line-height，显示效果正常
>>> 如果先写line-height，再写font，则line-height定义的效果会丢失，在IE、Firefox、Opera下都出现这种BUG

具体效果请看以下代码：

h1：

IECN.Net - 专注Web技术，体验开发乐趣！

IECN.Net - 专注Web技术，体验开发乐趣！

div：

IECN.Net - 专注Web技术，体验开发乐趣！

IECN.Net - 专注Web技术，体验开发乐趣！

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 小心：CSS代码书写顺序不同，导致显示效果不一样

    无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同. 即: >>> 如果先写font,再写line-height,显示效果正常 >>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE.Firefox.Opera下都出现这种BUG 具体效果请看以下代码: h1: IECN.Net - 专注Web技术,体验开发乐趣! IECN.N

  • font和line-height之CSS代码书写顺序不同，导致显示效果不一样

    无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同. 即: >>> 如果先写font,再写line-height,显示效果正常 >>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE.Firefox.Opera下都出现这种BUG 具体效果请看以下代码: <p>h1:</p> <h1 style=&

  • firefox推荐与个人理解的css书写顺序

    最近的工作中,遇到不少问题,其中一个问题我觉得是最重要的,那就是css的书写顺序,他可以体现一个前端工作者的思续.如果您看到本文,请不要再想到哪个属性就写哪个属性. 先来看一下firefox推荐的书写顺序 * mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) */ /* Sugg

  • 调整CSS类型的顺序改变链接翻滚效果

    你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活.并且,你可能也知道CSS类型的顺序可以产生效果上的差别,CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格.建立翻滚效果的类型顺序显得相当重要.     现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果,并且如何重新安排这些类型顺序以获得不同的翻滚效果. 链接状态 典型的CSS翻滚效果依赖于超链接中四个状态之一的独立类

  • CSS代码检查工具stylelint的使用方法详解

    CSS代码检查工具stylelint的使用方法详解

    CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑. CSS 是以描述为主的样式表,如果描述得混乱.没有规则,对于其他开发者一定是一个定时炸弹,特别是有强迫症的人群.CSS 看似简单,想要写出漂亮的 CSS 还是相当困难.所以校验 CSS 规则的行动迫在眉睫.stylelint是一个强大的现代 CSS 检测器,可以让开发者在样式表中遵循一致的约定和避免错误.本文将详细介绍CSS代码检查工具stylelint 概述 stylelint拥有超过150条的规则,包括捕捉错误.最佳实践.控制可

  • JavaScript常用代码书写规范的超全面总结

    一.全局命名空间污染 总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块. 不推荐 var x = 10, y = 100; console.log(window.x + ' ' + window.y); 推荐 ;(function(window){ 'use strict'; var x = 10, y = 100; console.log(window.x + ' ' + window.y); }(window)); 二.立即执行函数 在立即执行函数里面,如果有用到全局变量应该通过

  • javascript异步编程代码书写规范Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编程时候代码书写的方式产生的. 随着javascript的发展,异步的场景越来越多.前端有AJAX,setTimeout等,后端Node异步更多.按照传统的做法,那么就是各种回调嵌回调.代码可以把人绕晕. 这个时候,CommonJS社区提出了一个叫做Promise/A+的规范,这个规范定义了如何书写异步代

  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕①.这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个

  • CSS代码缩写技巧

    Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web建设者很少考虑

  • CSS代码格式化和压缩的方法与技巧

    第一步:需要掌握css的缩写技巧参考下面的文章即可CSS缩写优化CSS文件的体积CSS常用属性缩写实例[推荐]第二步:用css在线格式化与压缩工具第三步:测试,看看经过压缩后的css文件,会不会导致页面变形等问题,一般情况下不会,不排除特殊情况.别忘了备份样式文件啊. 下面是一般用于css压缩的代码,一般情况下,喜欢脚本的朋友看下.具体的应用上面的两部即可. CSS代码格式化和加密化 CSS代码格式化和加密化 /*请将CSS代码复制到这里,下面是示例*/ input,button{ height

随机推荐