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的支持都是有限的.
分享到:
相关推荐
在网页制作中,文本居中是一个常见的需求,而line-height属性正是用来调整行内元素中文本垂直对齐的关键。然而,有时候我们可能会遇到一个看似"bug"的现象,即使用line-height进行居中时,文本与容器之间会有3像素的...
postcss-trim-line-height 一个PostCSS插件,用于自动调整垂直边距以解决行高引入的空白。用法a { font : 600 2 rem/3.2 Georgia , serif; margin : 20 px 0 ; trim-line-height : < to> < to>}下一步 [bug]转换目标...
然而,IE6在处理这个属性时存在一个bug,它会将`line-height`与元素的`font-size`相加,而不是仅仅使用`line-height`设定的距离,从而导致了文字之间的实际间距变为正常值的两倍。 为了解决这个问题,开发者们开发...
在网页开发中,尤其是在处理与Internet Explorer(IE)浏览器相关的兼容性问题时,开发者经常会遇到一些经典的IE Bug。本知识点主要探讨其中两个关键问题及其解决方案,分别是内外间距差异和错误的元素扩展。 1. **...
`并将行高`line-height`设置为与容器相同的高度。例如,如果希望内容在一个200px高的容器中垂直居中,则设置`line-height:200px;`。 - **注意事项**:这种方法适用于单行文本或不换行的内容。 ##### 2. **Margin...
`line-height`用于设置元素内文本的行间距,但在Firefox和Opera浏览器中,对`button`元素的`line-height`处理方式与其他浏览器如Chrome、Safari和IE8等不同。 在示例代码中,我们可以看到一个`...
`属性将行高(`line-height`)设置为与容器相同的高度,从而使内容垂直居中。需要注意的是,这种方法仅适用于单行文本或图像等不会换行的内容。 **示例代码**: ```html .center { line-height: 200px; /* 假设...
5. **line-height默认行高bug** IE6对line-height的默认处理有时会出现问题。 解决方法:为相关元素设置具体的line-height值。 6. **行标签之间的空白** 行内元素之间可能存在一小段空白,这是由于浏览器的默认...
对于需要垂直居中的块级元素,可以通过设置行高`line-height`等于容器的高度来实现。例如,`line-height: 200px;`可以使内容在200像素高的DIV中垂直居中。但这种方法要求内容不能换行,否则布局将被破坏。 2. **...
- **解决策略**:可以通过设置行高(`line-height`)与容器高度相同的方式来实现垂直居中。例如: ```css .center-vertical { line-height: 200px; /* 假设容器高度为200px */ vertical-align: middle; } ``` ...
问题描述:IE6 下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px。 知识点解析:在 IE6 中,默认的行高会导致容器的高度无法设置为 1px。解决这个问题...
`结合增加行高的方式实现,如`line-height: 200px;`。需要注意的是这种方法适用于单行文本,如果内容可能换行,则此方法不适用。 ##### 2. **Margin加倍** - **问题描述**:设置了`float`属性的div,在IE浏览器下...
1. **设置div的行高**:首先设置div的高度,并将其行高(line-height)设置成与div高度相同。 ```css .center { height: 200px; line-height: 200px; } ``` 2. **应用vertical-align**:将内部元素的`vertical-...
解决方法:IE6 下默认的行高造成的,解决的方法有多种,例如:overflow:hidden | zoom:0.08 | line-height:1px。 六、让层显示在 FLASH 之上 解决方法:给 FLASH 设置透明:。 七、使一个 div 层居中于浏览器中 ...
本文旨在总结和分享一系列关于CSS兼容性的技巧,帮助开发者更好地解决在不同浏览器(如IE6-IE9、Firefox、Chrome等)下的样式差异问题。 #### 二、CSS兼容性基础知识 在深入探讨具体的兼容性技巧之前,我们首先...
本资源摘要信息详细介绍了浏览器兼容性问题的解决方案,涵盖了CSS技巧、浏览器bug、DIV浮动、IE兼容性问题等多个方面。 一、 兼容性问题:CSS 技巧 1. div 的垂直居中问题:使用vertical-align:middle;将行距增加...
这条口诀提到了IE浏览器中一个著名的bug——浮动双边距问题。当元素设置为`float:left`或`float:right`时,在IE6/7中可能会出现额外的边距。解决方法是将浮动元素的`display`属性设置为`inline`,这样可以避免双边距...
- **技巧介绍**:在CSS中实现元素的垂直居中通常有多种方法,但对于固定高度的容器而言,一种常见的方式是设置`line-height`等于容器的高度,同时将`vertical-align`设置为`middle`。 ```css .container { ...