当前位置: 首页 > news >正文

兼容各种浏览器的min-height

为什么80%的码农都做不了架构师?>>>   hot3.png

关于实现min-height的问题。
 
网上给出了实现方法
{height:auto !important;min-height:20px;height:20px;}

一看有点傻眼的感觉,IE6是不支持min-height属性的,有了height:auto !important后,ie6还如何实现min-height?

但是事实胜于雄辩,在一个div的css上写上上面属性,各个浏览器都实现了min-height;对!important语句在ie6下进行测试,用如下代码:
/*html*/
<p class="timp">测试代码</p>
/*css*/
p {color:blue !important}
p.timp {color:green}

上述代码在ie6下文字颜色为蓝色,由于p.timp选择符的优先级比p高,说明!important作用正常。
接着测试下面代码:
/*html*/
<p>测试代码</p>
/*css*/
p.timp {color:blue !important;color:green}

  结果p标签里的元素颜色为绿色。

 结论:在ie6下使用定义语句并用!important定义同一个属性的情况下,!important可以正常使用。而在同一个语句中定义同一个属性,!important不起作用,后定义的优先


因此{height:auto !important;min-height:20px;height:20px;}这段代码下,ie6的height属性值为20px。
 
既然如此直接将代码改为{height:20px;min_height:20px;}结果发现在标准浏览器下发现文字溢出的情况下,层的高度不会自动增加,原因在于定义了height的属性(height的默认值为auto,即容器的高度会随着内容的增加而增加),而ie6有一个bug,就是即使定义了height的值,容器高度仍会被内容撑开。
 
知道原理后可以很容易得出实现min-height的有效代码为seletor {min-height:20px; _height:20px;}。

转载于:https://my.oschina.net/i33/blog/69324

相关文章:

  • VMM2012应用指南之4-向VMM中添加Hyper-V主机与应用服务器
  • Hibernate中one-to-one的深入学习
  • TCP/IP详解卷一-概述
  • 常用JS图片滚动(无缝、平滑、上下左右滚动)
  • 开发人员经常会使用的15个jquery谷歌地图插件
  • HDFS写入和读取流程
  • linux压缩和解压缩命令
  • PHP 截取字符串
  • SMTP/POP3/IMAP 命令简介
  • 利用kickstart+ftp+dhcp+tftp实现PXE的自动安装
  • wcf out参数 异步调用问题
  • ASP.NET MVC集成EntLib实现“自动化”异常处理[实例篇]
  • HDU-4335 What is N? 欧拉函数,欧拉定理
  • 如何解决linux服务器能ping通,但总提示密码错误的问题
  • CSS伪类的一些用法以及visibility:hidden和display:none的一些区别
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • JS 面试题总结
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • React组件设计模式(一)
  • Vue.js 移动端适配之 vw 解决方案
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • 彻底搞懂浏览器Event-loop
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 猴子数据域名防封接口降低小说被封的风险
  • 解析 Webpack中import、require、按需加载的执行过程
  • 马上搞懂 GeoJSON
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 如何在 Tornado 中实现 Middleware
  • 使用putty远程连接linux
  • 算法-插入排序
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 原生JS动态加载JS、CSS文件及代码脚本
  • Android开发者必备:推荐一款助力开发的开源APP
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • 继 XDL 之后,阿里妈妈开源大规模分布式图表征学习框架 Euler ...
  • ​力扣解法汇总946-验证栈序列
  • #经典论文 异质山坡的物理模型 2 有效导水率
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • (C语言)球球大作战
  • (done) ROC曲线 和 AUC值 分别是什么?
  • (Git) gitignore基础使用
  • (Matalb时序预测)PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • (备忘)Java Map 遍历
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (第27天)Oracle 数据泵转换分区表
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (附源码)python旅游推荐系统 毕业设计 250623
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (力扣题库)跳跃游戏II(c++)
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • (转)h264中avc和flv数据的解析
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。