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

Firefox和IE6垂直居中

FirefoxHTML 
阅读更多 
<html>
    <body>
        <div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px solid red;">
            <p>垂直居中，Firefox only</p>
            <p>垂直居中，Firefox only</p>
            <p>垂直居中，Firefox only</p>
        </div>
        <div style="border: 1px solid red; height: 200px; position: relative;">
             <div style="position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中，IE6 only</p>
                     <p>垂直居中，IE6 only</p>
                     <p>垂直居中，IE6 only</p>
                 </div>
             </div>
        </div>
        <div style="border: 1px solid red; height: 200px; position: relative; display: table-cell; vertical-align: middle;">
             <div style="position: static !important; position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中，Firefox IE6 only</p>
                     <p>垂直居中，Firefox IE6 only</p>
                     <p>垂直居中，Firefox IE6 only</p>
                 </div>
             </div>
        </div>
    </body>
</html>

 

分享到：
| 颜色大全 颜色名称和颜色值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQUERY图片自动垂直居中水平居中-支持IE678910/chrome/firefox/opera

    明锋工作室整理常用资料。本次资料是一个自动居中插件，只要设定div长度和高度，其中的图片会自动铺满容器并且自动居中。...并且该自动居中插件支持IE6、IE7、IE8、IE9、IE10、CHROME、FIREFOX、OPERA。

    垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF

    "垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF"这个主题涉及到如何在各种浏览器环境下，包括Firefox和较旧的Internet Explorer版本，实现元素的完美垂直居中。 在CSS中，传统的垂直居中方法可能包括使用...

    CSS解决未知高度的DIV垂直居中

    - Firefox 1.5 - Opera 9.0 - Internet Explorer 6.0 - Internet Explorer 5.0 #### 结论 通过上述方法，我们可以有效地解决未知高度的`DIV`元素垂直居中的问题。这种方法不仅具有良好的兼容性，而且代码简洁，...

    div垂直居中屏幕

    div垂直居中屏幕的方法，兼容IE6 7 8 Firefox

    DIV未知高度的垂直居中代码.rar

    这包括了Firefox（火狐）、Opera（欧朋）和Internet Explorer（IE）等流行浏览器的老版本，其中IE6.0和5.0是特别知名的，因为它们对某些CSS和JavaScript特性支持有限，因此能在这些老版本中运行表示代码的兼容性很好...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    2. **居中对齐**：Firefox中，设置`div`的`margin-left`和`margin-right`为`auto`即可实现居中，但IE6和IE7需要通过设置`body`的`text-align`为`center`，然后让`div`的`margin`自动调整。 3. **高度和宽度的适应**...

    firefox与ie css+div兼容大全

    在标准模式下，Firefox和IE通常遵循W3C标准，但在Quirks Mode下，它们可能会模拟老版本的浏览器行为。因此，确保使用正确的DOCTYPE声明，如`&lt;!DOCTYPE html&gt;`，可以帮助浏览器进入标准模式。 2. **居中对齐**：Fire...

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

    尤其在2000年代中期，IE6、IE7 和 Firefox 的用户量占据了市场的大部分份额。由于这些浏览器对 CSS 的支持程度各不相同，导致网页设计者在开发过程中常常遇到兼容性问题。本文旨在详细介绍如何通过 CSS hack 技术...

    IE与Firefox的CSS兼容大全

    9. **IE5和IE6的盒模型**：IE5计算宽度时不包括边距，而IE6和其他浏览器则包含边距。可以通过`!important`和特殊的注释语法（如`width /**/:`）来修正。 10. **清除浮动**：浮动元素可能导致父元素高度塌陷。在Fire...

    div表格垂直居中.pdf

    \n\n最终，通过这些技术，可以创建一个兼容IE6+、Mozilla1.7+、NetscapeNavigator8+、Opera8.0+、Firefox1.0+和Safari1.0+的垂直居中布局。对于较旧的浏览器版本如Mozilla1.5+、NetscapeNavigator7+、Opera7+，理论...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf

    然而，不同的浏览器对CSS的支持程度和解析方式存在差异，特别是老版本的Internet Explorer（如IE6、IE7、IE8）与Firefox等现代浏览器。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度兼容性**...

    在IE8 FF中使用padding设置select控件文字垂直居中

    总结起来，要在一个老旧浏览器如IE8和Firefox中使用padding属性设置select控件文字垂直居中，可能需要结合多种CSS技巧和可能的JavaScript处理，以确保兼容性和视觉效果的一致性。随着浏览器的不断更新和标准化的推进...

    IE6_0、IE7_0 与FireFox CSS兼容的解决方法（网上收集）

    在Web开发的历史中，处理不同浏览器间的CSS兼容性问题一直是开发者面临的挑战，尤其是针对早期版本的Internet Explorer（如IE6_0和IE7_0）与FireFox之间的差异。以下是从标题、描述以及部分给定内容中提取并详细阐述...

    div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.docx

    3. **盒模型差异**：Firefox等标准浏览器和IE6/7的盒模型不同，导致`padding`和`border`会影响元素的`width`和`height`。解决方法是使用`box-sizing`属性，或针对IE使用`*{margin:0;padding:0;}`。 4. **`!...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    Firefox和其他基于Webkit的浏览器（如Chrome）遵循W3C标准盒模型，其内容区域不包括边距和填充，而IE6-8则使用非标准的盒模型，内容区域包括边距和填充。解决方法是使用`box-sizing`属性，或在CSS中分别设定`width`...

    div+css_兼容ie6_ie7_ie8_ie9和FireFox_Chrome等浏览器方法

    本文将详细介绍如何使基于div+css布局的网页在Internet Explorer（IE6, IE7, IE8, IE9）及Firefox、Chrome等现代浏览器中表现一致。 #### 1. DOCTYPE对CSS的影响 文档类型声明（DOCTYPE）是HTML文档的第一行，它...

    CSS在IE6 IE7与FireFox下的兼容问题整理

    1. **垂直居中问题**：在IE6和IE7中，要实现一个div的垂直居中，可以通过设置行距(line-height)等于div的高度来实现。但是这种方法可能导致内容换行的问题。例如： ```css .centered-div { line-height: 200px; ...

    input 文本框 文字垂直居中对齐 ie firefox

    标题“input 文本框 文字垂直居中对齐 ie firefox”揭示了一个跨浏览器兼容性的问题，即在Internet Explorer（IE）和Firefox中，通过CSS样式实现文字垂直居中的方式有所不同。 首先，让我们来看看在IE中如何实现...

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

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器"，这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**： DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

Magicbox
Global site tag (gtag.js) - Google Analytics