开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Safari忽略CSS高度

是指在使用Safari浏览器时，可能会出现CSS高度属性被忽略的情况。这可能导致页面布局出现问题或元素无法正确显示。

解决这个问题的方法可以有以下几种：

使用明确的高度值：在CSS中，可以使用具体的高度值（像素、百分比等）来代替使用auto或inherit等相对值。这样可以确保Safari正确地应用高度属性。
使用min-height属性：将高度属性替换为min-height属性，这样可以确保元素至少具有指定的最小高度。这在某些情况下可以解决Safari忽略高度属性的问题。
使用浮动或定位：在某些情况下，将元素设置为浮动或使用绝对定位可能会解决Safari忽略高度属性的问题。这是因为浮动和定位可以改变元素的布局行为，从而影响Safari对高度属性的解析。
更新Safari浏览器版本：有时，Safari的旧版本可能存在一些CSS解析的问题。因此，确保使用最新版本的Safari浏览器可能有助于解决高度属性被忽略的问题。

需要注意的是，以上解决方法可能因具体情况而异，需要根据实际情况进行尝试和调整。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云CDN：加速内容分发，提高网站访问速度和用户体验。详情请参考：https://cloud.tencent.com/product/cdn
腾讯云云函数（SCF）：无服务器计算服务，帮助开发者更轻松地构建和管理应用程序。详情请参考：https://cloud.tencent.com/product/scf

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS解决高度坍塌

什么是高度坍塌默认情况下当父元素不设置高度的时候父元素的高度是靠子元素撑大的，也就是说子元素有多高，父元素就有多高；但是当子元素加了浮动之后，子元素就脱离了文档流，这时候父元素就会发生高度坍塌现象。...先看没有高度坍塌的时候的样式：代码：解决高度坍塌...=edge" /> 解决高度坍塌...=edge" /> 解决高度坍塌

1.6K2 0

不容忽略的——CSS规范

一、CSS分类方法：公共型样式特殊型样式皮肤型样式并以此顺序引用 1 2 3 二、CSS命名规则使用类选择器，放弃ID选择器 NEC特殊字符："-"连字符分类的命名方法...三、代码格式选择器、属性和值都使用小写最后一个值也以分号结尾省略值为0时的单位使用单引号根据属性的重要性按顺序书写显示属性、自身属性、文本属性和其他修饰四、优化如果CSS可以做到，就不要使用

5132 0

css高度坍塌与清除浮动

高度坍塌的原因在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高....但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷.由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱.

1.9K5 0

【CSS系列】被忽略的content属性

你会发现原来还有这么多，被你忽略而且好用的功能。接下来就让我们一起见识见识它的更多用法。介绍首先我们先来看看 MDN 上对 content是如何描述的。...CSS 的 content属性用于在元素的 ::before和 ::after伪元素中插入内容。使用 content属性插入的内容都是匿名的可替换元素。...通常你要实现一个动态的递增数，都是通过 JavaScript 实现，你可能都没有想过 CSS 也是可以实现递增数。这个牛逼的东西就是「计数器」。...先来看看什么叫计数器：本质上 CSS 计数器是由 CSS 维护的变量，这些变量可能根据 CSS 规则增加以跟踪使用次数。..."; } 参考：《css世界》 Using CSS counters

1.1K2 0

css div高度设置100%如何生效！

例如，一个元素里面有一张 vertical-align 为 bottom 同时高度为 192 像素的图片，此时，该高度就是 192 像素，假设此时插入一个子元素，高度设为 100%...但是，父元素 height 值是 auto，岂不是现在高度要从原来的 192 像素变成 384 像素，然后 height:100%的子元素高度又要变成 384 像素，父元素高度又双倍……死循环了！...那问题又来了：为何宽度支持，高度就不支持呢？规范中其实给出了答案。如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto。...要知道，auto 和百分比计算，肯定是算不了的： 'auto' * 100/100 = NaN 但是，宽度的解释却是：如果包含块的宽度取决于该元素的宽度，那么产生的布局在 CSS 2.1 中是未定义的...这里和高度的规范定义就区别明显了，高度明确了就是 auto，高度百分比计算自然无果，width 却没有这样的说法，因此，就按照包含块真实的计算值作为百分比计算的基数。

5.8K0 0

容易被忽略的CSS安全性

每天晚上18:00准时推送翻译：疯狂的技术宅原文：https://jakearchibald.com/2018/third-party-css-is-not-safe/ 前一段时间，有很多关于用CSS...第三方CSS ? CSS的作用更接近于脚本而不是图像。和脚本一样，它适用于整个页面。它可以：删除/添加/修改页面内容。根据页面内容发出请求。对许多用户交互作出响应。...CSS不能修改原始存储，你不能用CSS写一个挖矿程序（也有可能，或许我还不知道），但恶意CSS仍然可以造成很大的破坏。键盘记录器咱们从最开始的那个问题开始 ?...此外，还有许多基于CSS的攻击：消失的内容 ?...所有这些都可以被CSS选择器设为目标，并且可以把结果发到某个服务器上。监控互动 ? 可以将hover和active等动作发送回服务器。适当的使用CSS，你可以很好地了解用户想要干什么。

8813 0

Safari浏览器自定义CSS样式表

这段CSS的主要目的是针对Safari浏览器自定义的样式表，实现：非英文内容进行全局样式的统一设定，同时优化了文字排版与显示效果。对于图标和其他特殊元素，则保持原有样式不变。.../* 以下CSS代码段针对非英语环境下的所有元素（除了包含特定类名或标签的元素）设置字体和字间距样式 */:not(:lang(en)) *:not([class*="icon"], .fa, .fab...important;}/* 下面的CSS代码应用于整个body以及所有的后代元素，开启特定的OpenType特性支持以改善字体渲染效果 */body,* { /* 启用"大小写替换"、"数字标记"、"

3440 0

为所有CSS网格行设置固定高度

当我构建100Ideas时，有一个小要求，当元素动态增加时，它不应该影响网格的布局，网格元素的行和列的高度应该是固定的。...content'> CSS

1971 0

解决子元素用css float浮动后父级元素高度自适应高度

1、在最后一个子元素后面清除浮动 2、父元素加over-flow:hidden;(副作用：子元素定位不能超出父元素的范围) 3、父元素也一样浮动(最笨的方法)；...

2.7K3 0

DIV+CSS侧边栏自适应高度

也就是说sidebar1定义的背景并没有自动随着页面高度的增加而自动延伸下来。即使你把sidebar1的高度设置成100%也是没有效果的。...解决办法很简单，因为另一侧的mainContent的内容增加了，高度变高了，会自动导致包含它的container的高度也自然增加，所以如果把sidebar1的背景设置在container中就解决了。.../images/left_bg.jpg) repeat-y; ---- Previous 打开Safari的开发模式

2.6K1 0

CSS魔法堂：那个被我们忽略的outline

前言在CSS魔法堂：改变单选框颜色就这么吹毛求疵！...中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^ Spec是这样描述它的作用...outline:0和outline:none的区别在Chrome下执行如下代码 .outline0{ outline: 0; } .outline-none...真心没法弄出圆角自从有了border-radius后，我们就可以通过CSS制作圆角矩形、圆形等图形，甚至连box-shadow也受到border-radius影响从而实现元素阴影也能做到圆角的效果。... .outline{ width: 13px; height: 13px; outline: 1px solid red;

7421 0

CSS 奇技淫巧：动态高度过渡动画

每次展开的时候，过渡展开到容器本身的高度即可。查看规范，究其原因，在于 CSS transtion 不支持元素的高度为 auto 的变化。...但是，我们又希望能够做到动态高度的过渡转换，是不是就没有办法了么？巧用 max-height 适配动态高度嘿嘿，这里有一个非常有意思的小技巧。...，这里的 1000px 只需要比最大高度高即可。...但是这里不能设置的太高，最高是贴近最大的使用高度即可，后面会聊到为什么。由于 max-height 只是限制文本的最大高度，当容器的实际高度没有达到限制的最大高度，将不会继续变高，看看效果： ?...最后好了，一个小细节，希望对你有所帮助，本文到此结束，希望对你有帮助 :) 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

1.3K1 0

【解疑答惑】css中经常被忽略的代码陷阱

css大家都认为是很简单东西，但是是代码就有让人头疼的时候，只是多少的问题，伴着小编走过的路，在前端多少也滚了一些坑，今天为了方便后来者，把收集到的东西跟大家分享一下，有需要的朋友可以当作参考，希望对各位盟友有帮助...：一. css 2.x code 1....deedf6 #deedf6 #fff;}.tab th{background:#edf4f0;}.tab tr.even td{background:#fff;} 7. min-height: 最小高度兼容代码...webkit-gradient(linear, left top, left bottom, color-stop(2%,#bde25e), color-stop(100%,#8bb31d)); /* Chrome,Safari4...+ */ background: -webkit-linear-gradient(top, #bde25e 2%,#8bb31d 100%); /* Chrome10+,Safari5.1+ */ background

6255 0

layui表格自适应高度_css布局左侧固定右侧自适应

//默认上下15px的边距高度，可根据需要修改 function layuiDialogFitScreen(){ var layui_title_height=$(window.parent.document...({“height”:mContentH}); $(window.parent.document).find(“.layui-layer-iframe”).css({“height”:mContentH...).height())+’px’); (window.parent.document).find(“.layui-layer-iframe”).css(“height”,((document).height..._margin=-($(document).height()-minH)/2+’px’; $(window.parent.document).find(“.layui-layer-iframe”).css...(“margin-top”,_margin); } } } //删除delH高度内容后内容自适应界面高度 function deleteFitView(delH){ var layui_title_height

4.1K1 0

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓...在国产的猎豹浏览器以及其他一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.不过没关系,大部分的常见布局问题,我都能解决掉.但是,下面这个….我真心有点费解.不过,没关系,通过我的研究,最终还是很快用CSS...问题是,设备的宽度是不固定的哦,那么问题就是,在不知道具体宽度的时候,如何来设定它对应的高度呢? 也就是说,如何在CSS中,找到一个高度和宽度挂钩的属性.只要存在这个参数,那么,问题就能解决.... CSS...在我们遇到一些问题的时候,尤其是布局这种问题,我们要考虑的是,能不能用CSS解决,而不时一位的去考虑JS.毕竟,JS是用来交互的,而CSS是用来布局的.

1.3K1 0

css如何实现一个元素高度固定宽度按比例显示？

用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？...解决后效果如图：红框标注的即是我在上面高度比例固定的范围内宽度自适应的效果； css代码： .content { margin: 0 auto; height: 79vh;...video-orientation="portrait" > 由于视频是有宽高比的，这里给视频的高度直接是外面盒子的高度

1.9K1 0

css3怎么实现高度从固定到自动的过渡动画？

比如auto的实际值取决于layout，而按照现在的css spec，computed value是不包含layout计算的，而transition是针对computed value的。...有一些proposal希望解决这个问题，比如允许transition从固定值到calc(auto)【目前calc是不支持auto关键字的】，但在css工作组的任务里这个case还处于低优先级，并且目前也没有听说有浏览器有计划尝试实现...方法一：因为css中height从0到auto的变化会被默认为从0到0，所以设置过渡效果并不会生效如果想要有点击展开的效果，可以考虑设置max-height为过渡样式 .list_div{display...所以最好还是在高度相对比较固定的时候用这个办法的好。方法二：只提供思路没写具体代码。一开始要展开的div在初始化的js里取出它的高度，赋给active的max-height，应该就可以了。

2.3K2 0

能让你受益匪浅的10个css使用技巧

CSS技巧大杂烩 01 Safari 中z-index的层级问题在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari...浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的...例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。...04 使用currentColor来简化css 设置border-color、background-color等颜色的时候，可以使用currentColor[与当前元素的字体颜色相同]来简化css。...如果仅设置值padding-top/bottom为百分比，会出现一个问题，就是该方法容器的max-height属性会失效，就无法限制容器的最大高度了。

1.6K2 0

移动端css解决图片高度无法百分比问题妙用

移动端布局，div按比例布局，宽度为百分比，高度和宽度一样，即让div为正方形 html 一个正方形 css div{ width:100%; height:0;

5421 0

CSS 也能实现 if 判断？实现动态高度下的不同样式展现

最近在群里，有个小伙伴问了这么一道很有趣的问题： CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容为了简化实际效果，我们看这么一张示意效果图：可以看到，当容器高度没有超过某一个值时...答案当然是可以，XBoxYan 大佬在 CSS 实现超过固定高度后出现展开折叠按钮介绍了一种非常巧妙的借助浮动的解法，十分有意思，感兴趣的同学可以先行一步了解。...当然，浮动 float 在现如今的 CSS 世界，运用的已经非常少了。那么除了浮动，还有没有其它有意思的解法？本文我们将一起来探究探究。...简单而言，容器查询它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度或者高度变化，对布局做调整的能力。...不太了解的，可以看看这篇现代 CSS 解决方案：CSS 数学函数利用 clamp()，我们可以限定计算值的最大最小范围，在这个场景下，我们可以限制 bottom 的最大值为 10px： .g-content

3725 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭