`
eimhee
  • 浏览: 2116566 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ie中的字体行高bug —— line-height bug

阅读更多
ie中的字体行高bug —— line-height bug
  在 firefox 中 ,无论你要 定义一个div的 高度是多少,firefox都能准确显示,而在ie中,我们会遇到这样的问题 :如果我们没有定义一个div的 line-height 和 font-size,那么一般情况下你定义一个高5px的div,通常你会看到一个高为12px的 div。

  这是因为ie默认的字体大概是12---14px之间,故这个div的高度无法显示为你指定的 高度 。

  要解决这个问题,有两个办法 :
  如 :

   <div class=" height:5px; font: 1px/1px Arial; "></div>

   或者 <div class=" height:5px; line-height: 1px; font-size:1px; "></div>

   另外一个办法,则不提倡使用,那就是运用 溢出隐藏 这个属性来解决 .即在代码的 css中加入 overflow: hidden.


  从这个想到一个问题,为什么我们要在一个不标准化的浏览器中实现网页的标准化?无论是ie还是firefox对css的支持都是有限的.
分享到:
评论

相关推荐

    tinyMCE富文本编辑器line-height行高插件

    tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示

    tinyMCE 富文本编辑器 line-height 行高插件

    tinyMCE 富文本编辑器 line-height 行高插件。...tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件

    ckeditor5-line-height-plugin:CKEditor5的创建插件,用于更改所选块的行高

    ckeditor5-line-height-plugin CKEditor5的创建插件,用于更改所选块的行高。 开始使用 首先,从npm安装构建: npm install --save ckeditor5-line-height-plugin 或使用纱线: yarn add ckeditor5-line-height-...

    深入理解CSS行高line-height与文本垂直居中的原理

    本文详细介绍了CSS行高属性line-height与文本垂直居中的原理,通过本文的介绍相信对大家以后使用line-height和设置文本垂直居中会更加熟练,有需要的可以参考借鉴。下面一起来看看。

    CSS教程:行高line-height属性(1)

    相关文章:CSS教程:行高line-height属性(2) 行高的概念看上去很简单——文字行的高度,其实,行高所涉及到的基础知识,对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味,因此适当地调整...

    关于css中line-height(行高)设置无效的问题的解决方法

    关于css中line-height(行高)设置无效的问题 我们先写下这一串代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style ...

    计算机应用基础课件——Excel-电子表格.pptx

    4.5 单元格数据的编辑 4.5.1 设置数字的格式 使用对话框设置数字的格式 使用工具栏设置数字格式 4.5.2 其他设置 可以使用【格式】工具栏中的按钮,或者在【单元格格式】对话框中的【字体】、【边框】、【图案】等...

    CSS line-height行高上下居中垂直居中样式属性

    line-height:+数字+单位(在CSS布局中我们一般采用像素px为单位)行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。 二、行高应用介绍 ...

    ckeditor-5 已增加调整行高

    调整了行高的

    css属性行高line-height的用法详解

    不过,行间距与半行间距,还是取决于CSS中的line-height。那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值:p{line-height:...

    美工之路 网页设计视频教程CSS篇-16.文本:行高line-height.rar

    美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...

    css中height和line-height区别

    line-height:行高 设置文字间上下距离 height:高度 就是定义一个层 或某样东西的高度啦 也就是说line-height是特指单行高度,height可以为所有元素的高度 文字放大后边缘会重叠? line-height直白理解就是文字...

    解决IE6下,给图片加上line-height属性不起作用的解决方法

    在css设置中,我们一般用行高line-height来设定某一行的高度,这在ie7与firefox等浏览器都适用。但当行中有其他元素时(如图片,SPAN,li..)在IE6.0下line-height会不起效果,后来查了下资料,果然如此,资料如下: ...

    tinyMCE 富文本编辑器 line-height 行间距调整.zip

    tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件

    深入理解CSS中的line-height的使用

    什么是line-height(行高)? line-height 是指两行文字基线之间的距离。 什么是基线? 基线、底线、顶线、中线   注意: 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 不同字体的基线...

    CSS行高line-height的个人理解

    ————————顶线(top line)———————————————— ——————————中线(middle line)———————————— ————————————基线(base line)——————————— ————...

    CSS中的line-height行高属性的使用技巧小结

    CSS中的line-hight属性是用来控制文本行之间的空隙的。它一般情况下没有单位的设定(如:line-height:1.4;)所以这是一个按字体尺寸的比例来计算。这对印刷版来说是一个很重要的属性。线条过低就会挤在一起,线条过...

    CSS教程:行高line-height属性(2)

    相关文章:CSS教程:行高line-height属性(1)7.3.3行高的计算与继承 以em、ex和百分比为单位的行高,其基数是元素本身的字体尺寸。例如有代码如下: 字高20px,行高2em。</p> <pstyle="font

Global site tag (gtag.js) - Google Analytics