CSS技巧大杂烩 01 Safari 中z-index的层级问题 在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari...浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的...出现了重叠的bug： ? 解决方法： 父级，任意父级，非body级别，设置overflow:hidden可恢复和其他浏览器一样的渲染。 以毒攻毒。...有时候，页面复杂，我们不能给父级设置overflow:hidden，那么可以将被影响的元素设置一个足够大的translateZ值就可以，如translateZ(100px)。...，需要通过构建BFC来保证容器不会受到影响，因此这里可以给容器一个overflow:hidden来保证伪元素的margin不会塌陷。
7文本居中，嵌套的块元素也会居中 ff /opera /safari /ie8文本会居中，嵌套块不会居中 解决： 块元素设置 1、margin-left:auto;margin-right:auto 2...IE6 width为奇数，右边多出1px的问题 问题： 父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素 解决： 将宽度的奇数值改成偶数 12....:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; } 33. ... html{overflow:hidden} 36. ...，子DIV将超出父DIV 解决： 设置overflow:hidden，子DIV将不会超出父DIV。
一些HTML标签默认具有haslayout。 PS：一个对象的layout属性被激活，它的具体表现就是haslayout=true。...haslayout 问题引起的常见 bug IE6 及更低版本的双空白边浮动 bug bug 修复: display:inline; IE5-6/win 的 3 像素偏移 bug bug 修复: _height...:1%; IE6 的躲躲猫(peek-a-boo) bug bug 修复: _height:1%; 这里列出触发 hasLayout 元素的一些效果 1.阻止外边距折叠 两个相连的 div 在垂直上的外边距会发生叠加...另外，例子中也使用了 overflow: hidden 触发元素的 BFC ，这利用了 BFC 阻止外边距折叠的特性达到元素在 IE 与现代浏览器下的表现统一。...本例子中也使用了 overflow: hidden 触发 BFC ，跟上例相似，这利用了 BFC 可以包含浮动子元素的特性达到元素在 IE 与现代浏览器下的表现统一。
select { direction: rtl; } ⭐️⭐️修复点击无效 在苹果系统上，有些元素无法触发click事件。通过声明cursor: pointer属性，可以解决这个问题。...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...原因 这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。 解决方案 利用伪元素和 scale 来实现 0.5px 的效果。...解决方案 给元素添加 overflow: hidden 属性。...⭐️⭐️iOS safari 被点击元素会出现半透明灰色遮罩 解决方案 给 html 或者 body 加入以下 css 代码。
6+, IE 8+ Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。...——来源：segmentfault Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的...block’元素显示。...svg:not(:root) { overflow: hidden; } /* ===========================================...避免 Android 4.0.* 中的 WebKit bug ，该bug会破坏原生的‘audio * 和‘video’控制器 * 2.
在下面的例子中，同样的按钮在 Chrome 和 Safari 中，后者添加了默认的灰色背景。 ?.../pe... 2.Overflow: scroll Vs auto 要限制元素的高度并允许用户在其中滚动，可以添加overflow: scroll-y。...这是因为无论内容如何，scroll-y都会显示滚动条，这时候我们可以使用overflow: auto，它只会在需要时显示滚动条。 ?...一个简单的修复方法是在父元素上设置font-size: 0。 ul { font-size: 0; } li { font-size: 16px; } ?...---- 代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
简介 要使用overflow属性，我们需要确保将其应用到的元素具有以下特征： 块级元素(例如:div、section)，通过height或max-height设置高度。...然而，在Safari上对iOS(12.4.1)进行测试时，滚动并没有起作用。经过反复试验，当我为子项添加宽度时，滚动起作用了，在iOS(13.3)上运行就没有问题啦。...如下所示： .card { overflow: hidden; border-radius: 7px; } 动画 当涉及动画时，overflow: hidden的好处是：在剪辑时可以悬停显示的隐藏元素上...touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...: hidden; text-overflow: ellipsis; } 如何调试水平滚动问题 既然我们已经知道了水平滚动的原因，我将介绍一些方法来帮助我们识别这些问题并解决它们。
给外层元素加一个overflow:hidden属性即可解决。...，在iOS下，需要禁止页面中的touchmove事件，在安卓下，需要给html, body元素加上如下CSS：height:100%;overflow:hidden;。...css.sm-no-scroll { height: 100%; overflow: hidden; } 但由于禁掉了touchmove事件，导致iOS下你希望滚动的部分也无法滚动了，因此对于希望滚动的部分...，通过e.stopPropagation保留原有滚动效果，并针对回弹动画的交互，建议使用如下代码声明一个可滚动区域： /* 以下属性添加到滚动容器上 */ -webkit-overflow-scrolling...在重叠的区域里，被遮盖的元素绑定click，遮盖的元素绑定touch事件，且touch后遮盖的元素会隐藏的话，就会造成穿透，因为click是在touch之后延迟触发的，浏览器会误认为是在遮盖的元素上触发了
不建议用overflow修复浮动，会影响布局。...原因：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在就对定位元素及其包含块（含position:relative/absolute/fixed声明的父级元素，没有则是body...问题：如何避免失效？ ...）；ⅱoverflow子元素transform（支持IE9+/FireFox/Chrome/Safari/Opera） overflow失效妙用： 菜单栏固定显示。...前提是white-space:nowrap以及overflow:hidden。 6、overflow与锚点技术 （1）锚链和锚点 锚链：就是我们url中常见的“#XXXX”。
所以，项目之间的间隔比项目与边框的间隔大一倍。 align-items属性定义项目在交叉轴上如何对齐。..., table-header-group, table-footer-group） overflow 计算值不为 visible 的元素 display 值 为 flow-root 的元素 contain...一般化的样式：为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化CSS可用性：用一些小技巧 解释代码：用注释和详细的文档来 /*!...它的效果和height:1%一样 } 在浮动元素后面加空标签（设clear:both） 给没有设置高度的父元素设置overflow:hidden 一个父亲不能被自己浮动的儿子，撑出高度。...但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。
通常在IE6中出现的BUG。非常可能是由于布局的缘故而产生的，因而修复IE中BUG的时候，第一件事就是尝试通过规则迫使元素拥有布局来看是否能修复。...5）zoom：不论什么值 6）writing-mode：tb-rl 在IE7中，下面属性也可迫使元素拥有布局： 1）overflow：hidden、scroll或auto 2）min-width：不论什么值...列表项上的背景图片间歇性的显示和消失 2、hack和过滤器 1）IE条件凝视 a）适用于IE5及其更高版本号 bug——IE6及其更低版本号 bug：不论什么浮动元素的外边距加倍 修复：将元素的display属性设置为inline 2）3像素文本偏移bug——IE6及其更低版本号 bug：当一个非浮动元素与一个浮动元素相邻时...两个元素之间会自己主动加入一个3像素的间隙 修复：方法一：将非浮动元素设置为浮动；方法二：为非浮动元素设置规则：_zoom: 1; margin-left: value; _margin-left: value
背景 这一个因为滚动条占据空间引起的bug, 查了一下资料， 最后也解决了，顺便研究一下这个属性， 做一下总结，分享给大家看看。...由此判定是： 滚动条占据空间 引起的bug。 overscroll-y: overlay CSS属性 overflow， 定义当一个元素的内容太大而无法适应块级格式化上下文的时候该做什么。...内容不会被修剪，会呈现在元素框之外 */ overflow: visible; /* 内容会被修剪，并且其余内容不可见 */ overflow: hidden; /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容...*/ overflow: scroll; /* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */ overflow: auto; /* 规定从父元素继承overflow属性的值 */ overflow...仅在基于 WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。
主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。...目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。...「解决方案」 在滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置 overflow 设置外部 overflow...为 hidden,设置内容元素 overflow 为 auto。...body { overflow-y: hidden; } .wrapper { overflow-y: auto; } js 篇 移动端click屏幕产生200-300 ms的延迟响应 移动设备上的
如果你想深入了解为什么会发生这种情况，Stack Overflow的这个帖子很有帮助。 如何修复移动设备上的100vh问题？ 第一个建议是尽量少用 vh。...仅使用 CSS 在移动设备上修复 100VH 问题 时，使用 vh 的目的是为了简单地创建与视口高度相等的部分。例如，当你在建立登陆页面时，这很常见。...Safari上的垂直 padding 问题 在 min-height（或 height）为 fill-available的元素上添加垂直 padding （bottom 和 top），Safari浏览器上会导致问题...使用JavaScript修复移动设备上的100vh问题 可以使用 window 的 innerHeight 属性，将元素 height （或minHeight）设置为window.innerHeight...代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
力求页面简单，做如下处理： ① 同比例缩减元素尺寸 ② 调整页面结构布局 ③ 隐藏冗余的元素 经常需要切换位置元素使用【绝对定位】，减少重绘提高渲染性能。...3、 特殊样式处理 （1） 高清图片 在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽度应该用物理像素单位渲染，即是100 * 100的图片，应该使用100dp * 10dp。...1 //单行文本溢出… 2 .inaline { 3 overflow: hidden; 4 white-space: nowrap; 5 text-overflow:...important; 10 overflow: hidden; 11 12 text-overflow: ellipsis; 13 word-break: break-all;...移动web页面也是拥有这样的能力的，但滚动有几种情况需要考虑： body层滚动：（系统特殊化处理） 自带弹性滚动，overflow：hidden失效，GIF和定时器暂停。
仅供学习，转载请注明出处 margin相关技巧 1、设置元素水平居中： margin:x auto; 2、margin负值让元素位移及边框合并 练习 1、制作一个600*100的盒子，边框1像素黑色...margin-top 塌陷 在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下： 1、外部盒子设置一个边框 2、外部盒子设置...overflow:hidden 3、使用伪元素类： .clearfix:before{ content: ''; display:table; } 练习 分别使用margin间距和padding...可以用上面介绍的三种方法： 1、外部盒子设置一个边框 2、外部盒子设置 overflow:hidden 3、使用伪元素类： .clearfix:before{ content: '';...再来看看 overflow:hidden 的方式 ? 这种方法挺好的，但是缺点就是 overflow:hidden 是本来用来遮掩溢出的元素的。用来修复这个bug的确不合适。 下面来看看另一种方法。
如何隐藏滚动条，同时仍然可以在任何元素上滚动？ 首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。...想要完全隐藏滚动条只需设置overflow：hidden即可，但是这样一来将导致元素内容不可滚动。...时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。...{ display: none; /* Chrome Safari */ } 注意：当你要隐藏滚动条的时候，最好将overflow显示设置为auto或者scroll保证内容是可滚动的。...: hidden; overflow-y: auto; }
他们的宽高分别如何计算？...body根元素 position: fixed|absolute(绝对定位元素) float(浮动元素) 除了none overflow: hidden|auto|scroll (除了visible之外的值...) display: inline-block\ table-cells\flex （具有table-的属性） 解决问题: 解决边界塌陷问题 解决浮动元素导致父元素高度塌陷问题 解决阻止元素被浮动元素覆盖问题...父元素加上overflow:hidden 在浮动元素的后面（同级），添加一个div，属性是clear:both 在父元素添加一个伪元素 .clearfix:after { display: block...保护有用的浏览器默认样式而不是完全去掉 一般化样式：为大部分html元素提供 修复浏览器自身的bug 优化css可用性 解释代码 7.5 如何做到一个list中奇数和偶数行的背景色不一样？
important关键字过滤器 它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法） 语法：选择符{属性：属性值！...写在一行上； hack2：将? 转换为块级元素，给?...：0； hack2:给元素添加声明：overflow：hidden； 5）表单元素行高对齐不一致 描素：表单元素行高对齐方式不一致 hack：给表单元素添加声明：float：left； 6）按钮元素默认大小不一...（也会受系统影响） hack：给右边的浮动元素添加声明 8）li列表的bug （1）当父元素li有float：left；子元素a没设置浮动的情况下会出现垂直bug； hack：给父元素li和子元素a都设置浮动...，设置margin-top后 会错误的把margin-top加在父元素上 hack1：给父元素添加声明overflow：hidden； hack1：:给父元素的子元素添加浮动 当两个上下排列的元素，上元素有
定义和用法 white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。...合并空白符序列，但是保留换行符 inherit 规定应该从父元素继承 white-space 属性的值 可能使用场景 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序限定字数...通常的做法是这样的： overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap...; width:100%; 其中，overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；-o-text-overflow: ellipsis针对Opera...-moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari 和 Chrome */ 浏览器支持的可伸缩元素
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
