Question

我有一个<div>标记，其中inline-block设置为css显示，以便适合其内容的大小。但是，我注意到在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>

Answer 1

尝试为<div>代码添加inline-block某个px的边框，例如border: solid 8px yellow;。您无需提供完整的边框，而border-right足以解决您的问题。但我在我的小提琴中应用了一个4边框。

Here 是一个现场演示。

Answer 2

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

在内联块DIV外面显示的文字？

2 个答案: