gpt4 book ai didi

css - 即 : Padding in horizontal scroll

转载 作者:行者123 更新时间:2023-11-28 05:28:32 25 4
gpt4 key购买 nike

我遇到了 IE 问题,我找不到合适的解决方案。

比较 Chrome 和 IE,我注意到添加 padding-right 将排除在 Chrome 中的内容宽度和 IE 中的部分宽度本身。

是否有任何适当的修复方法,或者我应该在这里选择浏览器特定样式?

如果解释不够好,请查看下面提供的代码段。

.container {
width: 480px;
height: 100px;
border: 1px solid black;
padding-right: 20px;
overflow: auto;
background: red;
}

.content {
display: inline-block;
white-space: nowrap;
height: 100%;
background: blue;
}

.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 10px;
background: white;
}
<div class="container">
<div class="content">
<div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div>
</div>
</div>

最佳答案

Comparing Chrome and IE I notice that adding padding-right will be excluded from content's width in Chrome and part of width itself in IE.

这是对在 Quirks 模式下显示页面时呈现的主要差异的经典描述。

您可以通过确保您的页面是有效的 HTML(即,它包含所有正确的 <html><head>...</head><body>...</body></html> 标记)并以有效的 DOCTYPE 声明开始(您可以使用许多文档类型,但最简单的一个就是 <!DOCTYPE html> )。

进行这些修复,您会发现 IE 呈现的内边距与 Chrome 完全相同。

关于css - 即 : Padding in horizontal scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38639820/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com