Html 内联块DIV外部显示的文本？_Html_Css

Html 内联块DIV外部显示的文本？

html css

Html 内联块DIV外部显示的文本？,html,css,Html,Css,我有一个标记，带有内联块，用于css显示，以便使大小适合其内容。然而，我注意到在FireFox中，最后的一些字母部分显示在标记之外，例如字母“f”。你知道如何在不改变填充的情况下解决这个问题吗代码： #div{ 位置：绝对位置；顶部：100px；左：200px；显示：内联块；边框：0px实心红色；轮廓：0px点蓝色；边际：0px；填充：0px；背景色：rgba（0,0,0,0.25）；最大宽度：1000px；最大高度：200px； } fff 试着给你的标签加上内联块一些

我有一个

标记，带有

内联块

，用于css显示，以便使大小适合其内容。然而，我注意到在FireFox中，最后的一些字母部分显示在

标记之外，例如字母“f”。你知道如何在不改变填充的情况下解决这个问题吗

代码：


#div{
位置：绝对位置；
顶部：100px；
左：200px；
显示：内联块；
边框：0px实心红色；
轮廓：0px点蓝色；
边际：0px；
填充：0px；
背景色：rgba（0,0,0,0.25）；
最大宽度：1000px；
最大高度：200px；
}
fff

试着给你的

标签加上

内联块

一些像素的边框，比如

边框：实心8px黄色。您不需要给出完整的边框，相反，右边框就足够解决您的问题了。但我在小提琴上画了一个4边的边框
是一个实时演示。
您的div标签有一些继承的样式，或者附近的另一个元素与之重叠。尝试使用另一个浏览器查看页面，并使用浏览器的web检查器查看div标记元素，以查看将哪些额外样式层叠到元素中（如果有）。这也可能是一个用户代理CSS问题（当浏览器的默认CSS设置干扰了您希望在页面上显示的内容时）。您可以在jsfiddle.net或其他网站上发布一个示例吗？他提到不要使用padding我希望DIV正确调整大小，而不是添加额外的填充、边框和轮廓
<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>