解决display:none后IE下会缩上去的方法：zoom:1

最新推荐文章于 2023-04-17 17:41:10 发布
原创 最新推荐文章于 2023-04-17 17:41:10 发布 · 827 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了解决在IE浏览器中使用display:none后元素会缩上去问题的方法，即使用zoom:1来处理，这是一个前端开发中常见的兼容性问题解决方案。
解决display:none后IE下会缩上去的方法：zoom:1
CSS 高频面试题
MissXu666的博客
01-23 575
CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题”，可以在CSS中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。赋予绝对定位的元素会从文档流中拖出，使用left、right、top、bottom等属性相对于相对于最近的已定位的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则根据 body 元素左上角作为参考进行定位。每个项目两侧的间隔相等。
禁止页面缩放提示，ie浏览器提示
sxiaobi
05-14 844
使用了新技术总会有兼容性问题，一般公司不考虑兼容性问题，但是还是出现诸如样式错乱、无法支持ie、缩放浏览器或屏幕设置比率非100%下的网页错位，作为开发者需要给出友好的提示，提高用户体验。 演示地址：https://sywsywsyw.github.io/noie-nozoom/ 源码：https://github.com/sywsywsyw/noie-nozoom 兼容ie8、不支持以下版本 兼容ie需要再服务器环境下打开 （可以使用http-server,live-server热更新服务） 因为缩放之后
css('display','none')隐藏datetimebox后，css('display','block')显示时，输入框被压缩了
weixin_42584758的博客
01-12 214
当使用 CSS 的 display: none 隐藏 datetimebox 元素时，该元素不会占用页面的布局空间，所以当再次使用 display: block 显示该元素时，页面布局可能会受到影响导致输入框被压缩。为避免这种情况，可以使用其他 CSS 属性，如 visibility: hidden/visible 或 opacity: 0/1来隐藏/显示元素，这样就可以保持页面布局不变。 ...
解决IE下select option不支持display none样式
weixin_30467087的博客
08-20 264
万恶的IE，option竟然不支持display样式，想到的解决思路有二个： 　　1、ajax联动查询 　　2、jQuery的remove()、after()方法 方法1的不好之处是初始页面，需要显示全部IP，本来已经从后台查询了一次，如果再利用ajax，会给服务器造成压力，所以采用方法2。 后台code // 获取所有平台类型IP$vcenter_ip = $this-&gt...
iframe设置display:none导致嵌入的页面之前的滚动位置清零
qq_36093530的博客
04-17 884
使用iframe同时嵌入多个页面时,iframe设置display:none导致嵌入的页面之前的滚动位置清零
IE7 下父元素及子元素的隐藏顺序带来的 display:none bug
ddk87869的博客
01-19 159
IE 7 下， 先隐藏 父元素，后隐藏子元素，再显示父元素， 被隐藏的子元素 重叠区域下面， 存在另一个可见的元素， 则该 display:none的子元素出现BUG： 背景和图片(img元素，不仅仅是图片背景)仍然显示， 但文字不显示，可以触发鼠标事件。 <!DOCTYPE html> <html xmlns="http://www.w3.org/19...
IE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUG
09-25
IE7下，先隐藏父元素，后隐藏子元素，再显示父元素，被隐藏的子元素重叠区域下面， 存在另一个可见的元素,则该display:none的子元素出现BUG;接下来介绍一下发生经过，感兴趣的朋友可以了解下啊，希望本文对你有帮助
详解IE浏览器的haslayout属性及相关兼容性问题解决
09-24
对于`display`属性，当`inline-block`激活了haslayout后，即使通过其他规则将其设置为`block`或`inline`，haslayout状态仍然保持，除非明确地使用上述方法重置。 总之，haslayout是IE浏览器渲染机制中的一个关键...
解决CSS在IE与火狐浏览器下的兼容性问题
解决这个问题的方法之一是使用条件注释为IE6单独提供样式表，或者通过设置`box-sizing`属性来统一盒模型的行为。例如： ```css .box { width: 200px; padding: 10px; border: 5px solid #000; box-sizing: ...
CSS之IE BUG分析与解决
01-29
解决方法包括使用负margin，设置`display:inline`，或者调整`width`和`height`属性，甚至使用`zoom`属性。 3. **浮动元素的双边距** - IE6在某些情况下会给浮动元素的左侧或右侧添加额外边距。通过设置`display:...
使用display:none有效减少回流造成的影响
weixin_34216107的博客
01-21 954
UI库果然对性能非常考究，我在mousedown的回调中插入一个节点，然后修改其样式，结果导致整个文档的点击事件都触发不了。顺便一点，当我们点击页面时，依次发生mousedown =&gt; mouseup =&gt; click。如果我们在mousedown或mouseup这前两个环节的回调中加入许多耗性能的操作，就会引发点击事件触发不了。不幸的是，我的selectable踩坑了。 selec...
select在ie浏览器和其他浏览器样式问题
笨鸟肥西的博客
10-12 1956
ie中取掉下拉箭头: 样式中加入 select::-ms-expand {             display: none;         } 其他浏览器取掉下拉箭头：-webkit-appearance: none; 重写select样式： . select {                  appearance: none;             background: ...
IE六display:none 三像素bug
蜗牛
08-24 209
前几天在项目中有个选项卡，采用display:none属性进行切换。 [img]/upload/attachment/139551/dc620293-c4ff-30a4-8ab5-afaa83a33282.jpg[/img] 内容区的css结构分为左、中、右三列，绿色显示的是带圆角的三像素垂直线条，蓝色区域是正文，红色区域是灰色背景。 为了方便说明问题，将代码结构精简为： [c...
csss之visibility:hidden和display:none
qq_53233068的博客
08-06 925
csss之visibility:hidden和display:none visibility:hidden和display:none再使用上有着看似相似的功效，但又不尽相同，在作用，定义以及对其他元素的影响上不同。 图一：原始状态 作用上的不同 　　visibility:hidden　　将元素隐藏，不在页面上显示 　　display:none　　　将元素属性设为无，不在网页上占据任何位置，当然也就不显示 这样一看貌似还挺像的，都可以使元素不在页面上显示，但，看下面两张图~
IE浏览器不支持display:none导致option不能隐藏的问题
热门推荐
韦观松のBóKè
04-28 1万+
项目场景：级联的select元素，根据一级select的选择，二级select中的option选项需要对应的隐藏或显示。 原来的做法是display:none和display:block来隐藏和显示option，option中通过自定义属性data-category过滤，控制option的隐藏或显示，结果在IE浏览器中并不能达到想要的效果，通过网络查找，是因为IE浏览器不支持display:no
完美解决IE浏览器 option display:none 隐藏无效
郭猛的博客
11-04 9246
最近遇到了select 下的option需要根据前一个select选项来显示或隐藏，发现在IE下该功能无法实现。 自己在网上看了一下前辈们的解决方法，然后根据自己的实际情况改了一下，放在这里给需要的朋友。//初始化select function toggleOptionInit(obj,firstException){ var firstException = argume
解决option设置display：none不兼容ie的问题
A_bet_of_three_years的博客
05-13 3935
注意：1.option设置display：none不兼容ie的问题 2.option的外包含标签和内包含标签浏览器都不读取自动拦截，也不报错。 解决display：none的兼容问题 &lt;!DocType html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head...
ie display none(ie下display属性失效)
weixin_34356138的博客
07-10 1568
2019独角兽企业重金招聘Python工程师标准>>> ...
display:none 和 display:flex 互相冲突
最新发布
07-31
`display:none` 和 `display:flex` 之间确实存在一定的冲突，因为它们代表了完全不同的样式模式。当你对一个元素设置 `display:none` 时，这个元素完全从文档流中移除，不会占用任何空间，也不会影响其他元素的布局，它在视觉上和交互上都被视为不可见。 然而，如果你同时设置了 `display:flex`，这意味着元素将会按照弹性盒模型的方式排列和展示。此时，如果元素被设置为 `display:none`，那么它的子元素将不再受到 `flex` 规则的影响，因为整个容器本身已不存在。 这种冲突通常发生在试图在同一时间控制元素的样式和布局时。比如，你可能希望某个元素在视口下拉菜单中显示为 flex 容器，但在屏幕较小或特定条件下隐藏起来。这时，你可以考虑使用媒体查询（@media queries）来针对不同的视口尺寸应用不同的样式： ```css /* 默认情况下，元素采用flex布局 */ .container { display: flex; } /* 当条件满足时，隐藏元素但保持其flex容器 */ @media (max-width: some-value) { .container { display: none; } } ``` 在这个例子中，`.container` 在小屏环境下会被隐藏，但其内部的子元素之间的弹性布局并不会生效。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值