IE和Chrome中的百分比边距不同

是因为两者在处理百分比边距时采用了不同的计算方式。

在IE浏览器中，百分比边距是相对于父元素的宽度进行计算的。例如，如果一个元素的父元素宽度为200px，设置了左边距为10%，那么实际的左边距就是20px（200px * 10% = 20px）。

而在Chrome浏览器中，百分比边距是相对于元素自身的宽度进行计算的。以同样的例子来说，如果一个元素的宽度为200px，设置了左边距为10%，那么实际的左边距就是20px（200px * 10% = 20px）。

这种差异在跨浏览器开发中可能会导致页面布局的不一致。为了解决这个问题，可以使用CSS框架或者媒体查询来针对不同的浏览器进行样式调整。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库MySQL版（CMYSQL）：https://cloud.tencent.com/product/cmysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iot
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关·内容

SwiftUI 中的内容边距

根据水平尺寸类别的不同（正常或紧凑），我们使用 contentMargins 视图修饰符来管理水平方向上的内容边距。在紧凑水平尺寸类别下，我们将内容移动了 200 个点，以便在大屏幕设备上居中显示。...你可以在 Playground 中运行此代码以查看结果。总结本文介绍了 SwiftUI 中的内容边距管理，通过对比安全区域的概念，解释了内容边距的重要性。...文章从创建示例开始，展示了在列表视图中如何处理内容边距的问题。...随后，通过介绍 UIKit 中的 readableContentGuide 布局指南以及 SwiftUI 中的 safeAreaPadding 视图修饰符，展示了在 iPad 上适配内容边距的方法。...最后，引入了 contentMargins 视图修饰符，并详细解释了其用法和参数，以及如何使用它来管理内容边距。通过本文，读者可以更好地理解并掌握 SwiftUI 中内容边距的管理技巧。

1763 2

IE6下margin双倍边距Bug的处理办法转

我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。...0 5px 100px; /*外边距的最后一个值保证了100像素的距离*/ } 很简单，对吧？...但是当我们在IE6中查看时，会发现左侧外边距100像素，被扩大到200个像素。如下图： ? 二、怎么会这样？说实话，这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。...而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子一样，元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。...同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。三、如何修正这个Bug？

9742 0

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

一直以来我们都很熟悉IE的“浮动边距加倍”的bug，并且绝大多数重构人员都已经很擅长在需要浮动时就直接绕过他。...其实以webkit为核心的浏览器，包括但不限于Safari和Chrome，也有一个关于浮动和边距的bug，同样会造成布局错误。...css中明确指定另一侧的边距为0或任意值也没用。...具体来说，可以分为两种情况：当BFC与浮动方向相同的边距小于或等于浮动元素占据的总宽度（width+margin+padding+border）时，BFC另一侧的边距等于所设定方向上的边距（下图前两种情况...100px的边距（等于sider总宽度）；以上截图来自这个demo页面，你可以用Safari或者Chrome自己打开查看具体情况。

1.7K5 0

学位论文如何设置最规范的页边距和装订线距离？

1、点击[布局] 2、点击[页边距] 3、点击[自定义边距] 4、点击[上] 5、点击[左] 6、点击[装订线] 7、点击[确定]

1.7K3 0

ie8和chrome获取上传图片的宽度和高度等尺寸

height=oImg.height; document.body.removeChild(oImg);//放弃预览 }; }; reader.readAsDataURL(oFile); }else{//ie

1.8K8 0

使用 XML 内部实体绕过 Chrome 和 IE 的 XSS 过滤器

XSS 过滤器，比如Chrome， IE 和 Safari 浏览器。...'data‘，那么它和 bne:cause的值将会返回给浏览器。...alert(1)并没有执行，可想而知，因为 Chrome 的XSS过滤器发现了攻击行为： ?...那么我们必须绕过 Chrome 的 XSS 过滤器了。我们同样也可以使用内部XML实体来解决。我们创建 IMG, SRC和error中的one实体。...在以下浏览器测试成功：Firefox version 47, Chrome 51, IE 11, Safari 9.1.1

1.4K10 0

CSS布局(二) 盒子模型属性

详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距；　　高度设置为auto，则会尽可能的窄。...的百分比值都是相对于包含块的宽度决定的，常常用于移动端头图外边距margin 设置外边距margin会在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景...所以，普通元素的margin百分比相对于块级父级元素的width，定位元素的margin百分比相对于定位父级的width margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性...但实际上，它是在很大的作用的，所以，我们要善用重叠，可以在列表项中同时使用margin-top和margin-bottom。...所以在IE下虚线显得比较密关于点线dotted，在chrome下，点线是方点；而在IE/firefox下，点线是圆点 border-style:none(默认) border-style:hidden

1.9K7 0

对html与body的一些研究与理解

IE6下body设置background颜色边框和边距后的表现还有一点可以证明我上面的推论，就是一旦设置了节点的background背景色之后，的背景色将失效。...Firefox浏览器下html标签支持margin外边距这是缩放到500像素宽的图片，仔细看还是会发现IE6下margin没有起作用，顶边的是30像素的边框，Firefox下margin起作用了，可以看到...所以呢，只要在css中些写上： html{overflow-y:scroll;} 就可以让IE和Firefox（包括chrome）浏览器默认产生滚动条的滚动槽了。...而这里要讲的是关于body和html的高度百分比显示的。...前者是经典的IE6 css hack，在当前主流浏览器中，就IE6支持，其含义是指在标签外还有一个隐藏的幽灵标签，我也不知道什么东西，反正IE6认得它就行了。

2.1K3 0

HTML Meta中添加X-UA-Compatible和IE=Edge，chrome=1有什么作用

这是一个文档兼容模式的定义。主要用于加强代码对IE的兼容性，强制IE使用当前本地最新版标准模式渲染或者用chrome内核渲染。...注意事项： 1、根据官网定义X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用。...2、content的内容是IE=8，或者IE=edge等值，注意不是IE8或者直接写个edge的值，否则不起作用浏览器模式（BROWSER MODE）：于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析...网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能，这样就可以向不同的浏览器返回不同的页面内容。默认情况下，IE8的浏览器模式为IE8。...用户可以通过单击地址栏旁边的兼容性视图按钮来手动切换到不同的浏览器模式。在IE8中，IE8兼容性视图会以IE7文档模式来显示网页，同时会向服务器发送IE7的用户代理字符串。

1.5K2 0

复制网页内容自动添加版权信息的方法(兼容IE、Firefox和Chrome)

复制网内容自动添加版权信息的方法在网上一搜可以看到很多类似的代码，加入网页body部分就可以。...clipboardData.setData("text", text); } }, 100 ) } 这段代码就可以实现，别忘了要写在js文件中或者直接写在页面中用...加上以上代码后，别人在你网站的任何一个页面，复制任何一个文字的东西，粘贴时都会自动带上版权信息。但这个代码的不足之处是：在IE6上测试通过，而在Firefox、Opera浏览器上没有效果。...},0 ); } document.oncopy = addLink; } 这个代码经测试，可以兼容，可能还有不足的地方...最好说一点，注意编码问题，如发现复制的内容添加的版权信息乱码，可以自行检查编码问题。

9732 0

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

在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的...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.2K1 0

前端兼容性

大部分人的手机分辨率都是1080x1920，在分类中却被归为了360x640，这个分辨率和CSS中的PX是一致的。...由于Chrome支持DPI，所以并不担心Web有DPI问题。但需要注意的是与手机屏幕分辨率不同，桌面分辨率要除以DPI比例，才是逻辑分辨率。...CSS兼容问题 1、不同浏览器的标签默认的内外边距不同解决方案：*{margin: 0; padding: 0;} 2、图片加a标签在IE9中会有边框解决方案：img{border: none;}...: inline-block; *display: inline;} 7、cursor兼容问题解决方案：统一使用{cursor: pointer;} 8、相邻元素设置margin边距时，margin将取最大值...，舍弃小值解决方案：不让边距重叠，可以给子元素加一个父元素，并设置该父元素设置：{overflow: hidden} 9、li中内容超过长度时，用省略号显示 li{ width: 200px; white-space

1.9K2 0

吃了吗？来5道css面试题

有什么不同你肯定会说一个是外边距一个是内边距。...二者的区别在于：作用对象不同，padding是针对自身的，margin是作用于外部对象的。...3.vw和百分比有什么区别第一种情况，两者都在body中，并且我给body的外边距margin都设置成了0px。...的内边距。...*/ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */

4142 0

前端面试题2（CSS）

低版本IE的盒子模型有什么不同的？...0，从而使这个元素“消失”在页面中 rgba() 和 opacity 的透明效果有什么不同？...Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局经常遇到的浏览器的JS兼容性有哪些？解决方法是什么？...双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。...是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法如何修改Chrome记住密码后自动填充表单的黄色背景？

2.8K1 1

table标签在谷歌和ie浏览器下不同的表现效果

在项目中有了一个这样的需求：　　我需要利用vue的模板语法v-for循环生成tr，这个tr是需要双重循环来确定其个数的，我的实现： ? 　　...我在tr外面包了一个template标签，效果：　　谷歌浏览器下实现了这个效果，但是在ie(11)下，却报错了 " item_i " is not defined 原因：　　table的嵌套规则是...tr里包换td，th ie浏览器在解析这段代码时，会把template这个标签当做table的平级标签去解析。如下图 ? 这个错真是一顿好找！~~~~~~~~~~~~~~~~~~~~~~~

6682 0

CSS 实用手册

分类选择器，允许将元素选择器和类选择器放在一起进行声明定义，以便达到对某种元素中不同样式的细分控制语法:元素选择器、类选择器{样式声明;} div.redColor{ margin:0;...Chrome 和 Safari :-webkit- ③. Opear :-o- ④. Microsoft IE :-ms- 如果浏览器不支持属性的话，则将前缀添加到属性名称前，如下所示: ①....在 td 中，设置文本的垂直对齐方式 ②. 设置行内块元素两边文本的垂直对齐方式 ③....::selection ，作用:匹配用户选取的内容部分 (5). 伪类选择器和伪元素远择器 ①. 伪类匹配元素不同的状态，伪元素匹配的是元素中的内容 ②....HTML 头部引用 Hack，即为 IE 条件注释，通过 html 的条件注释来判断浏览器版本，去执行不同的 CSS 语法： ①.

2.7K1 0

前端基础-CSS模型

多学一招：margin:0 auto;可以让盒子在其父元素中居中 margin:0 auto;和text-align:center;的区别 margin:0 auto； text-align:center...; 针对的对象盒子—块元素(标签本身) 标签内部的行元素居中的范围在父盒子中居中自己内部 3.边框属性边框有3要素：边框类型、边框颜色、边框厚度 a) 边框类型语法：border-style...多学一招：当盒子是正方形，圆角的值是边的一半或者百分比是50%的时候，是圆（ie8以下不支持），圆角和边框没关系总结：元素加边框后，元素会变大 4.盒子模型的bug： a) 盒子上下摆放，上盒子有下外边距...，下盒子有上外边距，两个边距会重合，以大的边距为准 bug1图示 ?...解决：避免或将这个间距都给到一个元素上面 b) 两个盒子嵌套关系，两个盒子对于上外边距会重合，以大的边距为准 bug2图示 ? bug2效果图 ?

5743 0

第140天：前端开发中浏览器兼容性问题总结（一）

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，我之前的项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。...中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。...解决方法：统一设置ul的内外边距为0 二、CSS样式的兼容性 1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 IE的条件注释hack： 2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍解决办法：display:block; 3.IE6下图片的下方有空隙...并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement 4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致

3.1K3 1

CHROME对CSS的解析

最近完成的一个项目需要做对Chrome的支持，在这个过程中发现了一个Chrome对于Css解析与FF、IE等的区别，在这里总结一下。...项目的需求是需要在屏幕的中央显示一个提示框，这个对于FF和IE都已经很成熟了，利用负边距能够很容易的实现：首先看一下页面： <!...position:relative; top:50%; left:50%; margin-left:-200px; margin-top:-200px; } 这样，在FF3、IE6.../7中都能，很好的实现水平和垂直居中，而在chrome中，出现了问题。...最后，发现是chrome对于position的解析和其他浏览器不同，加入css hack for chrome后，一切正常。

5232 0

金三银四，那浏览器兼容你知多少？

在各大浏览器厂商的发展过程中，它们对web的标准各有不同的实现，标准不同存在差异所以产生兼容性的问题。...Chrome Presto: Opera Blink: 由Google和Opera Softwase开发的浏览器排版引擎一些概念 CSS BUG Css样式在各浏览器中解析不一致的情况，或者说Css样式在浏览器中不能正确显示的问题称为...CSS Bug CSS hack CSS中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。...添加声明display：block； 3）双倍浮向（双倍边距）（只有ie6出现）描素: 当ie6及更低版本浏览器在解析浮动元素时会错误的把浮动边边距（margin）加倍显示。...7）百分比bug 描素：在ie6以及以下版本中解析百分比时会四舍五入方式计算从而导致50%加50%大于100%的情况。

5993 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云