首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

与任何其他浏览器相比,safari上的负边距不同

与其他浏览器相比,Safari 浏览器在处理负边距时有一些特殊的行为。负边距是指将边距的值设置为负数,这可以使元素在页面上向相邻元素或父元素重叠。在 Safari 浏览器中,负边距的处理方式与其他浏览器(如 Chrome 和 Firefox)略有不同。

在 Safari 浏览器中,负边距不会影响到其他兄弟元素或父元素的位置,而在其他浏览器中,负边距可能会导致其他元素的位置发生改变。此外,Safari 浏览器还对负边距的最小值和最大值有限制,这可以防止元素在页面上的位置发生异常。

总的来说,Safari 浏览器的负边距处理方式与其他浏览器存在差异,因此在开发网页时需要特别注意这一点。为了确保网页在不同浏览器中的兼容性,建议使用 CSS 的其他布局方法,如 Flexbox 或 Grid 布局,来实现元素的定位和重叠效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css负边距之详解

正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack 它符合正常的文档流 当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。...它是相当好的兼容性 负边距基本上被所有现代的浏览器支持(IE6的大部分情况也是) 当使用了float之后,会有不同的表现 负边距不是你平常使用的属性,所以使用的时候要格外小心。...负边距可以让你在不增加任何浮动和标签的情况下完成。...假如你把第十个div插入到9个其他的div中,不知道什么原因没有正确的排列,使用负边距来调整这个div就不需要改变其他9个div了,很方便。...结论 负外边距能够在不使用任何额外标签的情况下定位元素让它在现在网页设计中占有一席之地。随着更多的用户使用更新的浏览器(包括IE8),未来使用这些技巧的网站会变得更加有前景。

1.9K80

css负边距之详解

正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack 它符合正常的文档流 当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。...它是相当好的兼容性 负边距基本上被所有现代的浏览器支持(IE6的大部分情况也是) 当使用了float之后,会有不同的表现 负边距不是你平常使用的属性,所以使用的时候要格外小心。...负边距可以让你在不增加任何浮动和标签的情况下完成。...假如你把第十个div插入到9个其他的div中,不知道什么原因没有正确的排列,使用负边距来调整这个div就不需要改变其他9个div了,很方便。...结论 负外边距能够在不使用任何额外标签的情况下定位元素让它在现在网页设计中占有一席之地。随着更多的用户使用更新的浏览器(包括IE8),未来使用这些技巧的网站会变得更加有前景。

2.2K40
  • CSS 实用手册

    ,取值为正,右偏移,取值为负,左偏移 (2). v-shadow:(必须),阴影的垂直偏移距离,取值为正,下偏移,取值为负,上偏移 (3). blur:模糊距离,取值为数值 (4). spread :阴影的大小...+ 左右内边距 + width;元素的实际高度=上下外边距 + 上下边框 + 上下内边距 + height; (1). margin 外边距,围绕在元素边缘周围的空白区域,默认不能被其他元素所占据,作用是拉伸两个元素间的距离...语法:float:value ①. none 默认值,即无任何浮动 ②. left 元素左浮动,停靠在父元素的左边或其他已浮动元素的右边上 ③. right 元素右浮动,停靠在父元素的右边或其他已浮动元素的左边上...CSS Hack IE6 之前无兼容性可言,IE6 之后 各个浏览器追求标准统一,开始支持标准 IE 的其他浏览器要向前兼容,所以出现各种模式 (1). 三种模式 ①....HTML 头部引用 Hack,即为 IE 条件注释,通过 html 的条件注释来判断浏览器版本,去执行不同的 CSS 语法: ①.

    2.7K10

    css布局使用

    与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定。 如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠。...通过负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边...设置main宽度为100%,设置两侧栏的宽度。 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。 设置main的padding值给左右两个子面板留出空间。...双飞翼布局(float + 负margin ) **原理说明**: 双飞翼布局和圣杯布局的思想有些相似,都利用了浮动和负边距,但双飞翼布局在圣杯布局上做了改进,在main元素上加了一层div, 并设置margin...设置main-wrap宽度为100%,设置两个侧栏的宽度。 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。 设置main的margin值给左右两个子面板留出空间。

    1.9K90

    常见的几种 CSS 水平垂直居中解决办法

    This is test a b c d e f g h i j k a b c d e f g h i j k 五、负边距...margin的使用 这个方法主要用于块的居中,首先绝对定位到50% ,然后通过负边距拉回来(元素高的一半,宽的一半) html,body,div...六、css3中transform的使用 其实这种方式给负边距差不多,原理也是拉回来,不过因为css3的关系,IE8以下(包括IE8)还不支持 使用 transform: translate(-50%,-...优点: 1.支持跨浏览器,包括IE8-IE10. 2.无需其他特殊标记,CSS代码量少 3.支持百分比%属性值和min-/max-属性 4.只用这一个类可实现任何内容块居中 5.不论是否设置padding...绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。

    1.2K10

    【前端攻略】最全面的水平垂直居中方案与flexbox布局

    Demo 多个块状元素的水平居中     要实现多个水平排列的块状元素的水平居中,传统的方法是将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align...Demo 已知高度宽度元素的水平垂直居中 法一 绝对定位与负边距实现 利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。...Demo 法二 绝对定位与margin 这种方法也是利用绝对定位与margin,但是无需知道被垂直居中元素的高和宽。...某些浏览器仍需使用前缀写法: .flexboxtest{ display: flex; display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀 } 浏览器对最新版本的...-) Android 4.4+ iOS 7.1+ (prefixed with -webkit-) 文中介绍的flex用法只是一小部分,flex还有着其他强大的功能。

    1.4K40

    webkit中BFC元素临近浮动元素时的边距bug

    其实以webkit为核心的浏览器,包括但不限于Safari和Chrome,也有一个关于浮动和边距的bug,同样会造成布局错误。...这个BFC元素没有指定宽度值(或者指定width:auto) 当满足触发条件时,该BFC元素的另一侧的边距将不再受css控制(在webkit核心浏览器下),而是由你所指定的与浮动元素相同的边距决定,即使你在...具体来说,可以分为两种情况: 当BFC与浮动方向相同的边距小于或等于浮动元素占据的总宽度(width+margin+padding+border)时,BFC另一侧的边距等于所设定方向上的边距(下图前两种情况...); 当BFC与浮动方向相同的边距大于浮动元素占据的总宽度时,BFC另一侧的边距等于浮动元素占据的总宽度(下图第三种情况)。...100px的边距(等于sider总宽度); 以上截图来自这个demo页面,你可以用Safari或者Chrome自己打开查看具体情况。

    1.7K50

    web前端面试中10个关于css高频面试题,你都会吗?

    的值不为static或则releative中的任何一个 在IE下, Layout,可通过zoom:1 触发 BFC布局与普通文档流布局区别: BFC布局规则: 浮动的元素会被父级计算高度(父级元素触发了...居中布局 水平居中 行内元素: text-align:center 块级元素: margin:0 auto 绝对定位和移动: absolute + transform 绝对定位和负边距: absolute...四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见; 4....开发中为什么要初始化css样式 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 10....important,可以选择其他选择器 整理不易, 各位走过路过的大哥, 给小女子点个赞呗!

    2.8K20

    前端猿要了解的基本浏览器(BOM)知识

    、Safari、Opera、Chrome 都支持该属性,作用相同 Firefox并不支持 screenX 与 screenY 分别代表浏览器窗口相对于屏幕左边的距离和上边的距离 Firefox、Safari...、Chrome 都支持 Opera虽然支持这两个属性,但是与上述的 screenLeft 与 screenTop 并不对应,不建议使用在 Opera 中 关于边距的问题 在 IE、Opera 中,screenTop...保存的是最外层 window 对象可见页面的边距,这就导致即使浏览器紧贴屏幕,那么返回的距顶部距离不会是零而是工具栏高度,因为浏览器工具栏不算可见页面。...在 Chrome、Firefox、Safari 中,screenX 或者 screenTop 保存的就是窗口距屏幕的位置,将工具栏也包括在里面 总结,并不是每个浏览器都支持上述方法,另外一点,对于距顶部的距离...artId=13001 replace() 这个与 String 里面的那个不同,这个是 location 所具有的。 浏览器每一次跳转,历史记录都会记录,这样点击返回就能回到之前的页面。

    88310

    如何将HTML表格转换成精美的PDF

    不过,文档顶部和底部多出的几行文字虽然有用,但并没有让它看起来很专业。 另外需要注意的是,不同浏览器的原生打印功能是不一样的。如果我们用 Safari 浏览器打印同样的文档呢?...你可以创建一个新的 jsPDF 类的实例,给它一个你想导出的 HTML 内容的引用,然后提供任何其他附加的设置,如页边距大小或文档标题。...表格一直延伸到第一页的底部,然后在第二页的顶部直接接上。没有应用额外的边距,而且表文本内容有可能被切成两半。...我们可以保留我们漂亮的表格样式。表格的列头和表脚在每一页上都是重复的,表格的行数不会被切掉,而且页面四面都有适当大小的边距,每个页面的页眉也是重复的,每个页面底部的页码也是重复的。...DocRaptor 是其中功能最强大的一款,它拥有简单的 API 和漂亮的 PDF 输出。但同样,与其他不同的是,它是一项付费服务。

    6.9K20

    CIKM21「华为」推荐系统:用于协同过滤的余弦对比损失

    导读 协同过滤(CF)一般包含三个部分:交互编码器、负采样和损失函数。现有的大部分工作集中在设计更强模型上,对负采样和损失函数的改进的相关工作比较少。...m属于0~1是边距阈值,用于过滤负样本。含义:CCL被优化以最大化正对之间的相似性,并最小化边距约束下的负对的相似性. 是一个超参数,用于控制正样本损失和负样本损失的相对权重。...相比之下,CCL 通过使用适当的边距 来过滤无信息的负样本来缓解这个问题。 第三,作者发现直接对所有负样本的损失项求和或求平均会降低模型性能,尤其是当负样本数量很大时。...SimpleX 的聚合层可以采用常用的聚合方法,包括平均池化、自注意力和用户注意力机制等,但 Simplex 是一个统一的架构,任何其他聚合方法也应该适用。...h_u=g \cdot e_u+(1-g) \cdot V p_u 最后计算相似度,如下式, \hat{y}_{u i}=\cos \left(h_{u}, e_{i}\right) 实验结果 MF上不同损失函数的结果比较

    89910

    图文学习前端Flex布局

    .box-flex-flow-2 { display: flex; flex-flow: row wrap; } justify-content属性:指定在解析了任意灵活长度和自动边距后...第一个伸缩项的起始边被放置在伸缩容器的开始处。下一个伸缩项的起始边与第一个伸缩项的结束边按布局轴方向依次放置。所有沿布局轴保留的空间都放置在布局轴的末端。...如果剩余的自由空间是负的,或者一行上只有一个flex项目,这个值与' flex-start '相同。...否则,main-start保证的第一flex项目线的边缘放置充裕的main-start边缘线,最后一个flex项的主要目的利润边缘线放置充裕的主要目的边缘线,和其余的flex项目的分布之间的间距与任何两个相邻物品是一样的...image space-around 弹性项目均匀地分布在线中,在两端有一半大小的空间。如果剩余的自由空间是负的,或者一行上只有一个伸缩项,这个值与' center '相同。

    1.5K10

    【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth

    基本概念:标准模式和怪异模式,标准模型和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1.盒模型是什么 2018搜狐前端笔试题...盒模型本质上是用以封装HTML元素的概念盒子,它包含了边距,边框,填充以及实际内容。...Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。...依照标准,任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示(X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种...什么是边距重叠 如下图,父元素没有设置margin-top,而子元素设置了margin-top:20px;可以看出,父元素也一起有了边距。

    1K60

    JavaScript DOM元素尺寸和位置

    ,为184; 4.增加内边距,最终值等于原本大小加上内边距的大小,为220; PS:如果说没有设置任何CSS的宽和高度,那么非IE浏览器会算上滚动条和内边距的计算后的大小,而IE浏览器则返回0。...PS:对于元素的实际大小,scrollWidth和scrollHeight理解如下: 1.增加边框,不同浏览器有不同解释: a) Firefox和Opera浏览器会增加边框的大小,220 x 220 b...) IE、Chrome和Safari浏览器会忽略边框大小,200 x 200 c) IE浏览器只显示它本来内容的高度,200 x 18 2.增加内边距,最终值会等于原本大小加上内边距大小,220 x 220...5.增加内容溢出,Firefox、Chrome和IE获取实际内容高度,Opera比前三个浏览器获取的高度偏小,Safari比前三个浏览器获取的高度偏大。...如果四条边宽度不同的话,可以直接通过计算后的样式获取,或者采用以上三组获取元素大小的减法求得。 2.offsetLeft和offsetTop 这组属性可以获取当前元素相对于父元素的位置。

    2.8K70

    三. CSS layout(布局)

    marging) 外边距(margin) 外边距不会影响盒子可见框的大小 但是外边距会影响盒子的位置 一共有四个方向的外边距: margin-top 上外边距,设置一个正值,元素会向下移动...默认情况下设置margin-right不会产生任何效果 下外边距,设置一个正值,其下边的元素会向下移动 左外边距,设置一个正值,元素会向右移动 margin也可以设置负值,如果是负值则元素会向相反的方向移动...元素在页面中是按照自左向右的顺序排列的, 所以默认情况下如果我们设置的左和上外边距则会移动元素自身 而设置下和右外边距会移动其他元素 margin的简写属性: margin 可以同时设置四个方向的外边距...- 元素在页面中是按照自左向右的顺序排列的, 所以默认情况下如果我们设置的左和上外边距则会移动元素自身 而设置下和右外边距会移动其他元素...(两者都是正值) 特殊情况: 如果相邻的外边距一正一负,则取两者的和 如果相邻的外边距都是负值,则取两者中绝对值较大的 兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理

    2.2K40

    你是否彻底了解margin属性?

    你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… Margin是什么 CSS 边距属性定义元素周围的空间。...而其他标准浏览器则会表现出“有问题”的外观。好了,如果你读过了上面W3Shcool的CSS外边距合并的文章后,就很容易讨论这个问题了。...常见的浏览器下margin出现的bug 林林总总写了那么多,最后总结一些浏览器中常见的margin Bug吧,以后遇到margin下的布局问题可以查看这里找到解决的方案,如果你还发现其他关于浏览器下margin...原理分析:块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?...原理分析:IE6浏览器缺陷Bug。 IE6/7负margin隐藏Bug: 发生场合:当给一个有hasLayout的父元素内的非hasLayout元素设置负margin时,超出父元素部分不可见。

    88620

    深入学习下 CSS 间距相关的知识

    由于可以在四个不同的方向(上、右、下、左)添加边距,因此在深入示例和用例之前阐明一些基本概念非常重要。...负边距 它可以与四个方向的边距一起使用,在某些用例中非常有用。 让我们假设以下内容: 父级有 padding: 1rem,这导致子级从顶部、左侧和右侧偏移。 但是,子元素应该紧贴其父元素的边缘。...由于应用于父元素 .card__content 的填充,边框不会粘在边缘上。 是的,你猜对了! 负边距是解决办法。...你有没有想过当margin与具有不同书写模式的元素一起使用时应该如何表现? 考虑以下示例。...正如 Max Stoiber 所说,这有点将管理边距的责任转移到父元素上,让我们以这种心态重新考虑以前的用例。

    13.5K40

    20个编写现代CSS代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来...for Safari */display: -webkit-flex; } 使用CSS Reset 虽然这些年来随着浏览器的迅速发展与规范的统一,浏览器特性碎片化的情况有所改善,但是在不同的浏览器之间仍然存在着很多的行为差异...而所有的内边距与边都是在其之上的累加,譬如某个标签设置为宽100,内边距为10,那么最终元素会占用120(100 + 2*10)的像素。...border-box:内边距与边是包含在了width/height之内,譬如设置了width:100px 的 无论其内边距或者边长设置为多少,其占有的大小都是100px。...Caniuse 不同的浏览器在兼容性上差异很大,因此如果我们可以针对我们所需要适配的浏览器,在caniuse上我们可以查询某个特性的浏览器版本适配性,是否需要添加特定的前缀或者在某个平台上是否存在Bug

    40200
    领券