0

我有一个为 css 显示设置的<div>标签，inline-block以适应其内容的大小。但是，我注意到在 FireFox 中，一些最后的字母部分显示在<div>标签之外，例如字母“f”。任何线索如何在不改变填充的情况下解决这个问题？

代码：

<html>
<head>
<style>
#div {
                position: absolute;
                top: 100px;
                left: 200px;
                display: inline-block;
                border: 0px solid red;
                outline: 0px dotted blue;
                margin: 0px;
                padding: 0px;
                background-color: rgba(0, 0, 0, 0.25);
                max-width: 1000px;
                max-height: 200px;
}
</style>
</head>
<body id="body">
                <div id="div" contenteditable="true">fff</div>
</body>
</html>
4

2 回答 2

1

尝试为您的<div>标签添加inline-block一些 px 的边框，例如border: solid 8px yellow;. 您无需给出完整的边框，而 aborder-right就足以解决您的问题。但我在小提琴中应用了 4 边边框。

这是一个现场演示。

于 2012-09-10T05:02:25.947 回答
0

您的 div 标签有一些继承的样式，或者附近的另一个元素与其重叠。尝试使用另一个浏览器查看页面，并使用浏览器的 Web 检查器查看 div 标签元素，以查看哪些额外的样式被级联到元素中（如果有的话）。它也可能是用户代理 CSS 问题（当浏览器的默认 CSS 设置干扰您希望在页面上显示的内容时）。

于 2012-09-10T05:15:32.503 回答