`
yf1975
  • 浏览: 13987 次
  • 性别: Icon_minigender_1
  • 来自: 西安
最近访客 更多访客>>
社区版块
存档分类
最新评论

Firefox和IE中定义自适应高度的div

    博客分类:
  • CSS
阅读更多
在css中设置了div的默认高度,在IE中测试时div会随着内容的自动缩放,而在Firefox中内容会显示在div的外边。
针对上面的问题,通过使用选择器对css改造如下:
1.id属性选择器:
#div1{
...
 height:290px;/*IE中设置高度初始值*/
 min-height:290px;/*Firefox中设置高度初始值*/
...
}
/*使用属性选择器,IE不支持,专门给Firefox制定的,如果高度大于min-height,Firefox会根据内容自动改变高度*/
[id]#div1{height:auto;}

2.class属性选择器:
.div1{
...
 height:290px;
 min-height:290px;
...
}
[class]#div1{height:auto;}

从上面的例子可以看出,选择器分为id和class两种。通过使用选择器,就可以对Firefox进行专门的定制,从而可以制定出适合两个浏览器样式单。
4
0
分享到:
评论

相关推荐

    IE6的双倍边距和火狐自适应高度

    在标准模式下(例如在Firefox或IE8中),元素的高度通常是根据其内容自动调整的。然而,在IE6中,如果元素的高度没有被显式定义,则可能不会正确地反映其内部内容的实际高度。 **问题示例:** 假设有一个`<div>`...

    基于jQuery实现左右div自适应高度完全相同的代码

    在旧版本的Internet Explorer(IE)和Opera浏览器中,`offsetHeight` 包括滚动条和边框的高度,但是在Netscape(NS)和Firefox(FF)中,`offsetHeight` 只是元素的可视高度,不包括滚动条的高度。这导致了不同...

    CSS min-height IE6、IE7、FF下DIV自适应高度

    通过上述方法,可以在IE6、IE7以及Firefox等浏览器中实现DIV元素的自适应高度功能。虽然随着技术的发展,现代浏览器对CSS的支持已经相当完善,但在维护老旧项目或需要支持这些浏览器的情况下,这些技巧仍然非常有用...

    div控制最小高度又自适高度

    `在IE7、Firefox以及其他支持`min-height`属性的浏览器中起作用,它定义了`div`的最小高度。当内容高度小于100px时,`div`将保持100px的高度;如果内容高度超过100px,`div`则会根据内容自动增加高度。 通过这种...

    拥有最小高度能自适应高度同时全兼容IE、FF的div设置

    尤其是在IE(Internet Explorer)和FF(Firefox)浏览器之间,这两款浏览器在过去经常存在兼容性问题,使得开发者需要采取额外措施来保证网页的正常显示。 在本示例中,我们使用了CSS(层叠样式表)来定义div元素的...

    css解决IE6,IE7,firefox兼容性问题.

    - 空格和回车会导致元素间出现间隙,且在 IE 和 Firefox 中的宽度不同。解决方案是: ```css .elements { white-space: nowrap; } /* 防止换行 */ ``` 4. **对不规范代码的兼容性差异** - IE 对未闭合的标签更...

    IE和FireFox的CSS兼容

    在前端开发中,CSS兼容性是一个常见的挑战,尤其是在处理IE和Firefox这两个浏览器时。由于它们对CSS标准的实现存在差异,导致在不同浏览器下显示的效果可能不尽相同。以下是一些关键点,帮助开发者理解和解决这些...

    div+css静态文章模板(兼容火狐,IE6,IE7)

    在本篇文章中,我们将深入探讨“div+css静态文章模板”的设计原理、实现方法以及如何实现对火狐、IE6和IE7等主流浏览器的良好兼容性。 一、Div+CSS基础 Div(Division)是HTML中的一个布局元素,用于分隔网页内容...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器

    - **Padding与尺寸**:Firefox在应用`padding`后会增加`div`的高度和宽度,但IE不会。为了解决这个问题,可以在IE中使用`!important`为Firefox设置额外的`height`和`width`。 - **`!important`规则**:Firefox支持...

    CSS在不同浏览器中兼容问题

    * 并列排列的多个元素(图片或者链接)中的空格和回车会造成元素之间的间隙,Firefox 和 IE 中显示不同,解决方法是设置合适的 margin 和 padding 二、CSS 代码的不规范问题 * 对不规范代码的兼容情况不同,IE 中...

    前端兼容问题大全

    在IE和FireFox中,float的div闭合、清除浮动和自适应高度的处理方式不同。解决方法是使用统一的方法来处理float的div闭合、清除浮动和自适应高度。 三十三、高度不适应 在IE和FireFox中,高度不适应的处理方式不同...

    嵌入到HTML的iframe自动适应大小

    - 然后,通过`contentDocument`或`Document`属性访问iframe内部文档的body元素的高度,这里分别对应了Firefox和IE浏览器的实现差异。 - 最后,将计算得到的内部文档高度赋值给iframe的`height`样式属性,实现高度...

    CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器).docx

    经过测试,它在IE、Firefox、Safari、Opera等主流浏览器中都能正常工作,满足了跨浏览器的需求。 此外,文章还提到了一些相关的CSS和jQuery在处理表格时的示例,如列表标签`<list>`与表格标签`<table>`的用法,使用...

    javascript 装载iframe子页面,自适应高度

    // 以上firefox通过,但是ie6必须加上下面这句,不然iframe高度是改了,但是可见区域没有改 window.parent.document.getElementById("frameWin").style.height = newHeight; } ``` 这里的关键在于计算新的高度值`...

    important的妙用解决firefox和ie的css兼容问题

    在网页设计中,CSS(Cascading Style Sheets)的兼容性问题一直是开发者面临的挑战,特别是在处理Firefox和Internet Explorer(IE)这两个主流浏览器时。本文主要介绍如何利用`!important`这个CSS规则来解决Firefox...

    DIV+CSS设计时IE6、IE7、FF 与兼容性有关的特性

    1. FF会将padding计入元素的总宽度和高度,而IE不会,可以通过`!important`来调整。 2. 垂直居中可以使用`line-height`与div高度相同并结合`vertical-align: middle`;水平居中可设置`margin: 0 auto`。 3. 给`a`...

    Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    在同域情况下的 Iframe 高度自适应实现代码中,我们定义了一个 JavaScript 函数 `SetCwinHeight`,该函数通过获取 Iframe 内部 `document.body.offsetHeight` 或 `document.body.scrollHeight` 属性来确定内嵌页面的...

    新手学习DIV+CSS难点之经验总结

    1. **针对Firefox、IE6、IE7的不同CSS样式** 为了兼容不同的浏览器,可以使用条件注释或特定的语法来分别设置样式。 **CSS示例代码:** ```css #example { color: #333; /* Firefox */ *...

Global site tag (gtag.js) - Google Analytics