元素设置position:fixed属性后IE下宽度无法100%延伸

时间:2022-10-02 22:19:30

元素设置position:fixed属性后IE下宽度无法100%延伸

IE bug 出现条件:

1、div1设置position:fixed属性,并且想要width:100%的效果。

2、div2(下层元素)设置了宽度并居中。

解决方案:

.div1{left:0}即fixed层设置left值为0。

代码如下:

 <!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
*{margin:0px;padding:0px}
.div1{position:fixed;height:40px;background:#666;width:100%;color:#fff}
.div2{width:980px;margin:0 auto}
</style>
</head> <body>
<div class="test">
<div class="div1">元素设置position:fixed属性后IE下宽度无法100%延伸</div>
<div class="div2">div2设置了宽度</div>
</div>
</body>
</html>

元素设置position:fixed属性后IE下宽度无法100%延伸的更多相关文章

  1. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. 内层元素设置position&colon;relative后父元素overflow&colon;hidden overflow&colon;scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  3. 解决IE6不支持position&colon;fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  4. 小技巧css解决移动端ios不兼容position&colon;fixed属性,无需插件

    移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...

  5. IOS系统不兼容position&colon; fixed&semi;属性的解决方案

    position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...

  6. &lbrack;Web 前端&rsqb; inline-block元素设置overflow&colon;hidden属性导致相邻行内元素向下偏移

    cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...

  7. 关于js拖拽功能,拖拽元素的position&colon;fixed&semi;left&colon;0&semi;right&colon;0&semi;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  8. ie7中position&colon;fixed定位后导致margin&colon;0 auto&semi;无效

    布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...

  9. 使用storyboard设置button边框属性(颜色,宽度,圆角)

    通常使用Category时.仅仅能加入方法,不可加入属性.可是在使用Storyboard时我们可能会使用到keyPath,这里设置的key都须要是所设置视图的属性值.而且类型有所限制. 比如:我如今有 ...

随机推荐

  1. Cmd命令

    write----------写字板 mspaint--------画图板 mobsync--------同步命令 eudcedit-------造字程序 dvdplay--------DVD播放器 ...

  2. python socket 选项

    一.int socket(int domain, int type, int protocol) 1.domain -- 指定使用何种的地址类型 PF_INET, AF_INET: Ipv4网络协议P ...

  3. ASP&period;NET MVC &plus; EF 利用存储过程读取大数据,1亿数据测试很OK

    看到本文的标题,相信你会忍不住进来看看! 没错,本文要讲的就是这个重量级的东西,这个不仅仅支持单表查询,更能支持连接查询, 加入一个表10W数据,另一个表也是10万数据,当你用linq建立一个连接查询 ...

  4. UIScrollView的属性

    属性 作用 CGPoint contentOffSet 监控目前滚动的位置 CGSize contentSize 滚动范围的大小 UIEdgeInsets contentInset 视图在scroll ...

  5. linux下c编程 基础

    1. 熟悉Linux系统下的开发环境 2. 熟悉vi的基本操作 3. 熟悉gcc编译器的基本原理 4. 熟练使用gcc编译器的常用选项 5 .熟练使用gdb调试技术 6. 熟悉makefile基本原理 ...

  6. Django 自定义模板语法

    from django import template from django.utils.safestring import mark_safe register = template.Librar ...

  7. MySQL安装教程(mysql5&period;6&lowbar;bundle)

    1.下载软件包 下载链接:https://dev.mysql.com/downloads/mysql/5.6.html#downloads centos6--MySQL-5.6.35-1.el6.x8 ...

  8. 移植vsftpd到arm linux

    vsftpd即very secure FTP daemon(非常安全的FTP进程),是一个基于GPL发布的类UNIX类操作系统上运行的服务器的名字(是一种守护进程),可以运行在诸如Linux.BSD. ...

  9. JavaScript之深浅拷贝

    数组的浅拷贝 如果是数组,我们可以利用数组的一些方法比如:slice.concat 返回一个新数组的特性来实现拷贝.比如: , true, null, undefined]; var new_arr ...

  10. MongoDB - MongoDB CRUD Operations&comma; Insert Documents

    MongoDB provides the following methods for inserting documents into a collection: db.collection.inse ...