在IE6-的标准模式下和quirk模式下实现min-width

源码：

触发并利用IE6-layout的怪异特性，css实现：


代码如下:

<style type="text/css">

.ie6-out{
       _margin-left:900px;
       _zoom:1;
}
.ie6-in{
       _position:relative;
       _float:left;
       _margin-left:-900px;
}
#min-width{
       min-width:900px;
       background:#ccc;
       line-height:200px;
       _zoom:1;
}
</style>

<div class="ie6-out">
  <div class="ie6-in">
    <div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>
  </div>
</div>

css实现演示：

运行代码框

CSS实现最小宽度

body{ text-align:center;}
.ie6-out{
_margin-left:900px;
_zoom:1;
}
.ie6-in{
_position:relative;
_float:left;
_margin-left:-900px;
background:#f00;
line-height:200px;
}
#min-width{
min-width:900px;
background:#ccc;
_zoom:1;
}

aa

aa

ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮"查看宽度"。

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

CSS Expression
——相信许多人在用这个方法实现容器最小宽度时都时常会被莫名其妙的死机所困扰，最后往往无果而终。

这里特别需要指出的是两点：
1. IE6-的标准模式下和quirk模式下代表视口的元素是不一样的，前者为<html>，后者则为<body>；
2. IE6-在以上两种不同的模式下，其对包含内容溢出时的不同表现形式，从而导致了赋值判断上的死循环。解释起来有些啰嗦，自己实践一下吧。

CSS Expression实现最小宽度源码：


代码如下:

<style type="text/css">
body{ text-align:center;}
#min-width{
       min-width:900px;
       _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":"");
       line-height:200px;
       background:#ccc;
}
</style>
<div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>

演示：

CSS Expression实现最小宽度

body{ text-align:center;}
#min-width{
min-width:900px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)

ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮"查看宽度"。

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

以上两种解决方法在IE6-的标准模式下和quirk模式下都可实现，IE Expression在这个应用中也未发现CPU效率问题。

赞 (0)

相关推荐

  • 在IE6-的标准模式下和quirk模式下实现min-width

    源码: 触发并利用IE6-layout的怪异特性,css实现: 复制代码 代码如下: <style type="text/css"> .ie6-out{       _margin-left:900px;       _zoom:1;}.ie6-in{       _position:relative;       _float:left;       _margin-left:-900px;}#min-width{       min-width:900px;      

  • VirtualBox的Linux虚拟机文本模式和图形模式的切换问题

    1.默认开机进入文本模式 如果想让开机自动进纯文本模式, 修改/etc/inittab 找到其中的 id:5:initdefault: 这行指示启动时的运行级是5,也就是图形模式 改成3就是文本模式了 id:3:initdefault: 这是因为Linux操作系统有六种不同的运行级(run level),在不同的运行级下,系统有着不同的状态,这六种运行级分别为: 0:停机(记住不要把initdefault 设置为0,因为这样会使Linux无法启动) 1:单用户模式,就像Win9X下的安全模式.

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • C++中策略模式和工厂模式的区别

    工厂模式和策略模式看着很像,经常让人混淆不清; 它们的区别在哪里,需要细细体味: 相似点 在模式结构上,两者很相似: 差异 用途不一样 工厂是创建型模式,它的作用就是创建对象: 策略是行为型模式,它的作用是让一个对象在许多行为中选择一种行为; 关注点不一样 一个关注对象创建 一个关注行为的封装 解决不同的问题 工厂模式是创建型的设计模式,它接受指令,创建出符合要求的实例:它主要解决的是资源的统一分发,将对象的创建完全独立出来,让对象的创建和具体的使用客户无关.主要应用在多数据库选择,类库文件加载

  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

    在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

  • JavaScript设计模式之工厂模式和构造器模式

    什么是模式 前阵子准备期末考试,劳神又伤身的,实在闲不得空来更新文章,今天和大家说说javascript中的设计模式. 首先呢,我们需要知道的是:模式是一种可复用的解决方案,而反模式呢就是针对某个问题的不良解决方案. js反模式常见例子 1.向setTimeout和setInterval传递字符串,而不是函数,这会触发eval()的内部使用. 2.在全局上下文中定义大量的变量污染全局命名空间 3.修改Object类的原型 4.以内联形式使用js,嵌入在HTML文件中的js代码是无法包含在外部单元

  • 正则表达式的多行模式与单行模式图文分析

    正则表达式的多行模式与单行模式图文分析

    在Expresso中,测试"多行模式" 测试一 注意:这里样例文本中3eeeee后面没有回车,光标就在e的后面.匹配的结果是3eeeee,如上图的Search Results区中所示. 为什么这里不能匹配1abcde和2abc? 开启多行模式 ^ 可以匹配字符串开头(字符串的开始位置),也可以匹配行的开头(即换行符\n之后的位置) $ 可以匹配字符串结尾(字符串的结束位置), 也可以匹配行的结尾(即换行符\n之前的位置) 关闭多行模式 ^ 只能匹配字符串开头 $ 只能匹配字符串结尾 知

  • IIS7.5应用程序池集成模式和经典模式的区别介绍

    IIS7.5应用程序池集成模式和经典模式的区别介绍

    在 IIS 7.5 中,应用程序池有两种运行模式:集成模式和经典模式. 应用程序池模式会影响服务器处理托管代码请求的方式. 如果托管应用程序在采用集成模式的应用程序池中运行,服务器将使用 IIS 和 ASP.NET 的集成请求处理管道来处理请求. 如果托管应用程序在采用经典模式的应用程序池中运行,服务器会继续通过 Aspnet_isapi.dll 路由托管代码请求,其处理请求的方式就像应用程序在 IIS 6.0 中运行一样. 经典模式: 指的是与IIS 6或者之前版本保持兼容的一种模式,一个典型

  • Java设计模式之工厂模式（Factory模式）介绍

    Java设计模式之工厂模式（Factory模式）介绍

    工厂模式定义:提供创建对象的接口. 为何使用工厂模式 工厂模式是我们最常用的模式了,著名的Jive论坛,就大量使用了工厂模式,工厂模式在Java程序系统可以说是随处可见. 为什么工厂模式是如此常用?因为工厂模式就相当于创建实例对象的new,我们经常要根据类Class生成实例对象,如A a=new A() 工厂模式也是用来创建实例对象的,所以以后new时就要多个心眼,是否可以考虑实用工厂模式,虽然这样做,可能多做一些工作,但会给你系统带来更大的可扩展性和尽量少的修改量. 我们以类Sample为例,

  • javascript组合使用构造函数模式和原型模式实例

    本文实例讲述了javascript组合使用构造函数模式和原型模式的方法.分享给大家供大家参考.具体如下: function testPrototype2(){ function Person3(name, age, job){ this.name=name; this.age=age; this.job=job; this.friends =["shelb", "court"]; } Person3.prototype = { constructor:Person3

随机推荐