DIV+CSS兼容解决DIV最大宽度和最小宽度问题
在制作网页中,我们经常会碰到min/max-width,min/max-height在IE6底下是无效的,这也是web设计师最头疼的问题之一,以下的方法可以解决这些难题,并且比较简约。当然,如果你还有更好的方法,希望能在主页留言给我:
<div style="max-width:250px;">这段文字内容,ax /min 在ie7 + 和firfox,safari,opera浏览器下均支持,最宽值为250px</div>不过IE6无法认读这个属性,还好IE它支持自己javascript的属性表达,例如:
div{width:expression_r(250+"px")} 和 div{widt:250px}在IE 的认读中都是一致的!但如果有的用户在浏览器中禁用javascript,这个写法就失败了。所以,需要换一种方法:
#mycss {
width:100%;
max-width:500px;
width:expression_r(document.body.clientWidth > 500? "500px": "auto" ); }
或是:
#mycss {
max-width: 33em;
width: expression_r(document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );
}
我们设置了容器mycss的宽度为:width:100%; 其实这是一句废话,因为DIV是块元素,默认的宽度就是父级元素的宽度。此例中div宽度,若不进行声明则等同于body的宽度。
我们设置容器的max-width为500px。这对于FF来说是有效的。而对于IE则没有作用。
面对没有效果的IE,我们应用expression_r嵌入脚本,声明了当宽度大于500px的时候,宽度就等于500px。
parseInt(document.body.currentStyle.fontSize)?"33em":"auto" 如果这个实际宽度大于 (500/12)当前字体的尺寸,则设置页面的宽度为 33em。
同样,对于最小的宽度,和ax/min-hight,也是一样的:
最小:
#mycss {
min-width: 333px;
width: expression_r( document.body.clientWidth < 334 ? "333px" : "auto" );
}
最大高度:
#mycss {
max-height: 333px;
height: expression_r( this.scrollHeight > 332 ? "333px" : "auto" )
}
最小高度:
#mycss {
min-height: 333px;
height: expression_r( this.scrollHeight < 334 ? "333px" : "auto" );
}
另外还有一种简单的方法:
#a {height:auto !important; min-height:400px;}
这个样式可以在IE5.5,IE6,IE7以及FF,Safari等浏览器下的解决最小高度问题,最大高度就没有实践过了,呵呵。
本文转自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181367.html
DIV+CSS兼容解决DIV最大宽度和最小宽度问题的更多相关文章
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 ...
- DIV+CSS常见问题:DIV如何设置一个像素高度?
CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- div+css:两个div并排等高 (table-cell)
两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- CSS 兼容解决之hack
什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack ...
- 2天驾驭DIV+CSS (实战篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- div+css布局记扎
实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...
随机推荐
- C# 使用Xamarin开发Android应用程序
C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.) 摘要: 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://gi ...
- php,perl计算crc
PHP版: <?php echo getCrc32("/var/www/html/resource/koc_data/2013_03/01/1ck65e.koc") ; # ...
- U盘启动装完系统后 一拔下优盘 就不能进入系统
PE下Ghost安装的,装好进入系统正常,可是拔下 u盘就进不去系统,而插上 u盘就好好的 原因:引导的事,找到本地硬盘第一分区并且激活! 就可以了! 可用下“电脑店-修复主引导记录(MBR)工具”h ...
- aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【基本地图的操作】
为了更简单的演示,我们创建个.NET的ASP.NET MVC4项目 好了,上面都是后话,POI说白了,就是你的用户的数据,很多数据,不过没关系,因为你的数据如果存在百度的LBS云上,那么大数据你就不用 ...
- spark.mllib源代码阅读-优化算法1-Gradient
Spark中定义的损失函数及梯度,在看源代码之前,先回想一下机器学习中定义了哪些损失函数,毕竟梯度求解是为优化求解损失函数服务的. 监督学习问题是在如果空间F中选取模型f作为决策函数.对于给定的输入X ...
- sqlserver使用存储过程发送http请求
本文主要向大家介绍了SQLServer数据库访问发送Http请求,通过具体的内容向大家展现,希望对大家学习SQLServer数据库有所帮助. -- 通用读取获取数据存储过程 --开启Sql Serve ...
- 大批量导入数据的SqlBulkCopy类
SqlBulkCopy 这个类用于数据库大批量的数据传递,通常用于新旧数据库之间的更新.关键的一点是,即使表结构不同,也可以通过表字段或者字段位置建立映射关系,将所需的数据导入到目标数据库. 下面代 ...
- Cadence 5141 下TSMC 05U工艺库安装
以下资料摘自:<T13RF PDK簡介>-張文旭 观念与TSMC工艺库的安装 管理者安裝TSMC 0.13 MS/RF的環境下之PDK的安裝方式相當容易,首先以root的方式進入Unix/ ...
- Python 爬虫实例(15) 爬取 汽车之家(汽车授权经销商)
有人给我吹牛逼,说汽车之家反爬很厉害,我不服气,所以就爬取了一下这个网址. 本片博客的目的是重点的分析定向爬虫的过程,希望读者能学会爬虫的分析流程. 一:爬虫的目标: 打开汽车之家的链接:https: ...
- java 执行mysql 8.0.11存储过程报错The user specified as a definer ('root'@'10.%.%.%') does not exist解决办法
执行存储过程,报错 java.sql.SQLException: The user specified as a definer ('root'@'10.%.%.%') does not exist ...