IE6 select 浮层遮盖

最新推荐文章于 2024-09-05 11:30:24 发布
最新推荐文章于 2024-09-05 11:30:24 发布
阅读量108 收藏
点赞数
分类专栏： div-css 文章标签： css

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>IE6 select 浮层遮盖</title>

<style>

.as-selectmask {

    position: absolute;

    left:0;

    top:0;

    z-index: 10;

    overflow: hidden;

    width: 33em;

    height:50px;

}

.as-selectmask iframe {

    position: absolute;

    top: 0; 

    left: 0; 

    z-index: -1;

    border:none;

    filter: mask();

    width: 3000px; /* for any big value */

    height: 3000px /* for any big value */

}

</style>

</head>

 

<body>

<select>

    <option>1</option>

    <option>2</option>

</select>

<div class="as-selectmask" style="background:#ddd;">

    内容<br/>

    <!--[if lt IE 7]><iframe src="javascript:'';"></iframe><![endif]-->

</div>

</body>

 

<!--

mask的用法

/*设置CSS样式开始*/

div{position:absolute;top:20;left:40; filter:mask(color:#0000ff);}

/*定义DIV区域的样式，绝对定位，mask属性的color参数值指定用什么颜色遮住对象*/

p{font-family:bailey;font-size:72pt; font-weight:bold;color:#ff0000;}

/*定义P区域内的样式，字体名称、大小、粗细、前景色*/

<div>

  <p> wenyleaf </p>

</div>

-->

</html>

 

iteye_6992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE7浮层遮挡问题探讨及解决
09-25
在网页设计和开发中，IE7（Internet Explorer 7）浮层遮挡问题是一个常见的兼容性挑战，尤其是在处理复杂的交互式界面时。浮层，通常指的是那些覆盖在页面其他元素之上，用于显示额外信息或者进行交互操作的元素，如...
div等浮层在IE6下被下拉框遮挡的解决方法
09-25
在IE6浏览器中，一个常见的问题是在页面上使用div创建的浮动层（通常用于弹出窗口或下拉菜单）会被网页中的下拉列表（DropDownList）遮挡。这是因为IE6处理下拉列表的方式不同，它将DropDownList视为系统级别的控件...
浮层浮动在select的标签上
weizuqing的专栏
10-23 265
例如 上传大附件 ...
如何在iframe内部弹出浮层，浮层遮罩整个浏览器
热门推荐
AngieLife
04-13 1万+
需求说明： 页面内有多级iframe嵌套； iframe内部某些按钮点击后需要弹出浮层； 浮层需要将整个浏览器窗口遮罩，且浮层位于浏览窗口中部。 解决思路： 顶层页面内预留用于显示浮层的div(命名为popdiv),且该div内有一预留的iframe，该iframe用于加载浮层内容，命名为popiframe； 提供可以直接访问浮层内容的url连接； iframe触发显示浮层事件时，通过window.
解决IE6下浮层遮盖select刺穿的问题
weixin_34346099的博客
12-26 54
图一未解决刺穿问题：　　　　　　　　　　　　　　图二已解决 解决方法使用iframe间接挡住层，具体方法见源码 源码一（未解决刺穿）： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Ty...
html 下拉 遮罩,select网页下拉列表与div层遮盖问题
weixin_39943383的博客
06-01 247
select网页下拉列表与div层遮盖问题互联网 发布时间：2009-04-02 20:55:20 作者：佚名 我要评论在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。 第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果在html...
select网页下拉列表与div层遮盖问题
boolean2011的专栏
03-01 406
在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。 第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果你在FirFox下和IE7下看都    在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于se
html 下拉弹出框,下拉框(select)遮住弹出层问题
weixin_32644565的博客
06-03 1228
在IE6下下拉框(select)会遮住弹出层，用样式办法暂时无法解决，包括z-index这个属性。想了一个最变态的方法：就是在层弹出的时候把下拉框给隐藏掉，用display:none属性或visable:hiddle属性;当层隐藏的时候再把下拉框给显示出来：function hiddenselect(){??? var f = document.forms[“form1″];??? if (f)?...
解决：IE6下，div被下拉框所遮挡的问题
Insist
04-17 2517
工作中遇到一个问题单，系统在IE6下面，部分展示不正确，IE8下展示正确。如图： 之前分析原因有点绕路了。后来经同事指点是因为IE6下面下拉框的问题。 IE6下面select算是什么窗口级别的，不能被div所覆盖，z-index不起作用，所以出现这个问题。 解决方法关键在于iframe可以覆盖select，而div又可以覆盖iframe，so： 1.把select都用iframe包
下拉框的分离设计
{ focus : web }
01-26 193
     模拟系统内置下拉框，使得在所有的系统以及浏览器中具有同样的表现，目标是功能分解，利用 mixin 分离实现。   下拉框功能点分析：   1.可以存储值，是一个存储数据的容器，相当于 readonly 的 input。   2.有下拉箭头，点击下拉箭头可以弹出选项列表。（实际上点击存储容器也有同样的表现）。   3.选项列表本质是一个 overlay，选项列表弹出后会...
鼠标hover父级添加overflow，弹出框被隐藏问题。
yummry的博客
03-08 5347
1.老铁碰到问题，发到群里边。类似于二级联动下拉列表，由于需求改变，要求一级下拉列表添加滚动条，乍一听没毛病，一个overflow就解决的问题。然后聊着聊着发现了问题先发下原始图：效果图如下：html代码：主要问题：给父元素添加overflow：scroll，子元素的弹出框会受影响。效果做完之后滚动条会影响效果，鼠标在经过滚动条移动到右侧弹出框，弹出框直接消失。各种百度发现overflow影响的是...
CSS 高级区块效果——WEB开发系列25
一条晒干的咸鱼的博客
08-31 1829
CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。
CSS解析：层叠、优先级和继承
晓风残月淡的博客
08-31 893
CSS虽说不是编程语言，但是日常使用中经常有很多误解，发现样式不奏效的情况，所以需要加强下CSS基础。 CSS本质上就是声明规则，即在各种条件下，我们希望产生特定的效果。 如果某个元素有这个类，则应用这些样式。 如果X元素是Y元素的子节点，则应用那些样式。 浏览器会根据这些规则，判断每个规则应该用在哪里，并使用它们去渲染页面。
html,css学习记录
2301_79347603的博客
09-01 2155
html,css学习记录htmlcss盒子模型 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mykingdom</title> <link
前端知识HTML&CSS
w13114的博客
08-31 1336
前端知识
CSS中 特殊类型的选择器 伪元素如何使用
最新发布
wangyufei0815的博客
09-05 416
在 CSS 中，伪元素是一种特殊类型的选择器，它允许你为元素的特定部分添加样式，而这些部分在 HTML 文档中并不实际存在。伪元素通常用于创建装饰性效果，如添加边框、背景、阴影等，而不需要额外的 HTML 标记。伪元素以两个冒号（）开头，与伪类（一个冒号，）区分开来。最常见的伪元素包括：1.::before：在元素的内容之前插入内容。2.::after：在元素的内容之后插入内容。
css画个熊猫
此博客内容主要是小可日常工作中的一些问题解决的记录整理而成
08-29 1127
【html源码-一键复制查看效果】/* 不规则的圆形写法 *//* 半圆线条 */
flutter怎么使用浮层
04-01
Flutter中使用浮层可以通过Overlay Widget和OverlayEntry Widget来实现。 1. 创建Overlay Widget ``` final overlay = Overlay.of(context); ``` 2. 创建OverlayEntry Widget ``` final overlayEntry = OverlayEntry( builder: (BuildContext context) => Container( //浮层内容 ), ); ``` 3. 插入OverlayEntry Widget ``` overlay.insert(overlayEntry); ``` 4. 移除OverlayEntry Widget ``` overlayEntry.remove(); ``` 完整使用示例： ``` import 'package:flutter/material.dart'; class OverlayDemo extends StatefulWidget { @override _OverlayDemoState createState() => _OverlayDemoState(); } class _OverlayDemoState extends State<OverlayDemo> { OverlayEntry overlayEntry; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Overlay Demo'), ), body: Center( child: RaisedButton( child: Text('Show Overlay'), onPressed: () { final overlay = Overlay.of(context); overlayEntry = OverlayEntry( builder: (BuildContext context) => Container( color: Colors.black.withOpacity(0.5), child: Center( child: Text( 'This is an overlay', style: TextStyle( color: Colors.white, fontSize: 24.0, ), ), ), ), ); overlay.insert(overlayEntry); }, ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.clear), onPressed: () { overlayEntry.remove(); }, ), ); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值