关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--
一个详细的说明请见:
http://www.cnblogs.com/yiyang/p/3265006.html
我的问题大约为,如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<style type="text/css">
.abs {
position: absolute;
top: 0px;
left: 0px;
padding: 10px;
} .fl {
float: left;
border: 2px solid blue;
} .fr {
float: right;
border: 2px solid blue;
}
</style>
</head> <div class="abs">
<div class="fl">我向左浮动</div>
<div class="fr">我向右浮动</div>
</div> </html>
可以亲自试一下,在ie6中的显示结果如下:
而在chrome中,结果如下:
首先解释下,在chrome中,如下外层的元素不是浮动,则两个内部div一个在左一个在又,这属于正常;而如果为浮动或绝对定位的,则内部div相邻。
ie6中则都是一个在左一个在右。
由于我是想做一个鼠标移上去就显示的下拉列表,因此必须使用绝对定位,而由于下拉列表中有文本,必须使用自适应宽度,在网上查了很多解决方案,包括设置zoom: 1什么的,都不好用。最好只好自己写一个js脚本,由于内部元素的宽度是自适应的,所以可以通过它们来计算和设置外部div的宽度。:-)
关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--的更多相关文章
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- 设置文字在div中垂直居中,使用line-height
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...
- IE6 IE7: div中table宽度100%导致的宽度问题
问题现象:定义了DOCTYPE的页面 当表格的内容比div的高度还要高时,div会出现滚动条,同时在IE6和IE7下会出现问题: IE6:此时table的100%宽度还是没有滚动条那是的宽度,出现滚动 ...
- IE6下绝对定位元素和浮动元素并列绝对定位元素消失
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS定位(CSS定位概述、相对定位、绝对定位、浮动)
CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...
- css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...
- 实现全屏轮播,并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...
- div 中图片溢出问题及 CSS3中图片翻转问题
如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...
- CSS中正确理解浮动以及clear:both的关系
要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...
随机推荐
- javascript进阶修炼之一——javascript必备操做
动态选择方法及属性 使用方括号操作符,比点操作符功能更强大.因为可以在[ ]方括号中使用任何代表成员名称的内容访问对象.包括字面量,保存着成员名称的变量,名称组合,三元操作符.所有这些内容都会被处理成 ...
- idea 创建Java WEB 项目
第一步 FILE - New Project 写上名字,然后 点 Finish 这里特别注意,不懂路径 那么 就点上 inherit 再点下面 让他默认 加载你的 web 路径 选择 Jar包 , ...
- 【最全 干货 实例】 缓存手册(Memcached、redis、RabbitMQ)
http://www.cnblogs.com/suoning/p/5807247.html 本章内容: Memcached 简介.安装.使用 Python 操作 Memcached 天生支持集群 re ...
- sublime设置右键在浏览器打开
用sublime编辑html文件,右键此文件,自带一个在浏览器中打开,但是这个是在IE里打开, 如何在chrome里打开呢. 1. 这里插入一下安装"view in browser" ...
- hadoop 之Hadoop生态系统
1.Hadoop生态系统概况 Hadoop是一个能够对大量数据进行分布式处理的软件框架.具有可靠.高效.可伸缩的特点. Hadoop的核心是HDFS和Mapreduce,hadoop2.0还包括YAR ...
- MYSQL子查询例题以及答案
More Subqueries Quizzes Above is the ERD for the database again - it might come in handy as you tack ...
- CF 1093G Multidimensional Queries——线段树(消去绝对值符号)
题目:http://codeforces.com/contest/1093/problem/G 只好看看题解:https://codeforces.com/blog/entry/63877 主要是把绝 ...
- linux中控操作相关
1.首先生成无密码登陆密钥 一般使用rsa 2.编写shell脚本 work_dir=$(pwd) 3.远程拷贝 work_dir=$(pwd) ..} do ¥{host_prefix}$i:$ e ...
- rtesseract的例子
这个是用来验证码识别的 需要先装一下这些 brew install Tesseract brew install imagemagick gem install rmagick 测试代码 requir ...
- cocos2dx 3.0 编译工程
下载完2dx,运行setup.py,参考设置ANDROID_SDK,NDK_ROOT,ANT_ROOT变量 创建工程 cocos new testGame -p com.game.test -l cp ...