首页
学习
活动
专区
工具
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.8K80

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设置左边自身宽度。 设置mainpadding值给左右两个子面板留出空间。...双飞翼布局(float + margin ) **原理说明**: 双飞翼布局和圣杯布局思想有些相似,都利用了浮动和,但双飞翼布局在圣杯布局做了改进,在main元素加了一层div, 并设置margin...设置main-wrap宽度为100%,设置两个侧栏宽度。 设置 ,sub设置左边为100%,extra设置左边自身宽度。 设置mainmargin值给左右两个子面板留出空间。

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.3K40

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 所具有的。 浏览器每一次跳转,历史记录都会记录,这样点击返回就能回到之前页面。

84810

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

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

6.8K20

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不同损失函数结果比较

74210

【前端芝士树】详解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;可以看出,父元素也一起有了

98360

图文学习前端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

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.7K70

三. CSS layout(布局)

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

2.1K40

你是否彻底了解margin属性?

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

77420

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

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

13.4K40

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

37600
领券