IE6及以上版本fixed问题解决方案,页面右下角固定页面,可以最大化、最小化、正规显示
在窗口固定位置显示内容使用fixed,但是 IE 6 不支持,后来我搜了很多方法,都没有作用,后来类比着一个网站的代码,使用absolute 、z-index解决了问题。
页面div结构:
<div runat="server" id="divMap" class="divMap" >
<div class="divMapTool">
<img alt="最大" title="最大" class="bigestImg" src="../../Css/images/bigest.JPG" />
<img alt="正常" title="正常" class="normalImg" src="../../Css/images/normal.JPG" />
<img alt="最小" title="最小" class="smallestImg" src="../../Css/images/smallest.JPG" />
</div>
<iframe runat="server" id="mapIframe" src="http://192.168.27.208/webgis/webgis.html" frameborder=; scrolling="no" >
</iframe>
</div>
样式:
*html
{
background-image:url(about:blank);
background-attachment:fixed;
} /*各个小图片*/
.bigestImg,.normalImg,.smallestImg
{
border:0px;
width:15px;
height:15px;
z-index: ;
position: absolute;
cursor:pointer; }
/*3个小图片中间间隔5px,和两边间隔10px */
.smallestImg
{
left:10px;
}
.normalImg
{
left:30px;
}
.bigestImg
{
left: 50px;
} /* 3个小图片外层的div */
.divMapTool
{
left:0px;
z-index:;
position: absolute;
height: 15px;
width:75px;
}
/* iframe的样式*/
#mapIframe
{
z-index:-;
position:absolute;
width:250px;
height: 250px;
} /*最外层div 初始化时的样式*/
#divMap
{
z-index: ;
border:0px;
position: absolute;
width:250px;
height:265px;
overflow:hidden;
bottom: 10px;
right: 10px;
}
脚本:
<script type="text/javascript"> $(function () { $(".smallestImg").click(function () {
$("#mapIframe").height().width(); //最小化不显示Iframe
$("#divMap").height().width();
}); $(".normalImg").click(function () {
$("#divMap").height().width() ;
$("#mapIframe").height().width(); }); $(".bigestImg").click(function () {
var height = $(window).height();
var width = $(window).width();
$("#divMap").height(height - ).width(width - );
$("#mapIframe").height(height - ).width(width - );
}); }); </script>
IE6及以上版本fixed问题解决方案,页面右下角固定页面,可以最大化、最小化、正规显示的更多相关文章
- Layui父页面向子页面传参
废话不多说!直接上代码! 父窗体js $('.mytable').on('click', '.editRow', function () { var table = $('#table_id_exam ...
- IE6浏览器不支持固定定位(position:fixed)解决方案(转)
IE6浏览器不支持固定定位(position:fixed)解决方案 来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...
- 解决IE6不支持position:fixed属性
最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...
- 解决IE6下Position:fixed问题(只用css)
在IE6.0及以下版本的浏览器里是不支持position:fixed.而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的.解决此问题的要点主要有: 1).容器要有一个 ...
- IE6浏览器兼容问题及部分解决方案(网上整理)
作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...
- 修正IE6不支持position:fixed的bug(转)
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...
- 完美解决IE6不支持position:fixed的bug
示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...
- js完美解决IE6不支持position:fixed的bug
详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
随机推荐
- DTMF的原理分析
转自:http://blog.csdn.net/wangwenwen/article/details/8264925 1. DTMF原理 DTMF(Double Tone MulitiFrequenc ...
- hihoCoder 1391 Countries【预处理+排序+优先队列】2016北京网络赛
题目:http://hihocoder.com/problemset/problem/1391 题目大意: A和B两个国家互射导弹,每个国家都有一个防御系统,在防御系统开启的时间内可以将到达本国的导弹 ...
- Error: Could not find or load main class test.EditFile
今天写了一个简单的小程序,运行之后发现Error: Could not find or load main class test.EditFile,项目无法启动.删除main中的所有内容之后依旧提示该 ...
- Build better apps: Windows 10 by 10 development series
http://blogs.windows.com/buildingapps/2015/08/05/build-better-apps-windows-10-by-10-development-seri ...
- struct 类型重定义
类型定义的那个头文件只需要在功能源文件里#include 开始在主函数源文件里也#include,所以出现了重定义
- 汇编学习(二)——8086CPU
一.8086CPU 1.微处理器 (1)微控制机:也称单片机 (2)DSP芯片:数字信号处理芯片 (3)嵌入式微处理器 (4)通用微处理器:PC站.工作站.服务器使用的处理器 2.内部结构: (1)总 ...
- UML 之 四种关系
学习过UML的人都知道,UML之中有九种图和四种关系,今天,我们先来介绍一下这四种关系: 对于我们这些初学者来说,UML之中无非是 关联.依赖.泛化和实现,但是其中,关联和依赖又如何区分?泛化又如何 ...
- telnet时显示:允许更多到 telnet 服务器的连接。请稍候再试
telnet时显示:允许更多到 telnet 服务器的连接.请稍候再试 解决办法: windows自带telnet服务器默认的最大连接数为2,要想修改该设置,可以在命令行键入tlntadmn c ...
- 《DSP using MATLAB》示例Example5.3
- 原生 js 写分页
欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...