css - 在 FireFox 的文本区域内定位文本

标签 css firefox cross-browser

我试图用 div 中的相同文本覆盖 textarea 中的文本。我已经设法让它在除 FireFox 之外的所有浏览器中工作(我使用的是 8.0)。在 FireFox 中,textarea 中的文本向左移动 1px。

这是我的代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div, textarea 
{
    position:absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    font-family: Consolas;
    font-size: medium;
    border:none;
    border-width: 0px;
}
div {color:red;}
textarea {color: blue;}
</style></head>

<body>
<textarea>Stuff</textarea>
<div>Stuff</div>

</body>
</html>

最佳答案

我想我可以为此找到最优雅的解决方案。 Firefox 不会从文本区域中减去一个像素,而是减去一个半个像素。看看这个:

http://jsfiddle.net/e4YGW/19/

在最新版本的 Firefox、Chrome、Opera 和 Safari 中测试。

关于css - 在 FireFox 的文本区域内定位文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8293384/

相关文章:

html - 在导航栏 div 内对齐图像

css - 在 css 中垂直对齐展开的文本

Firefox font-weight 与 font-family 属性;如何避免双粗体

javascript - 图像在 Google Chrome 中扭曲,但在 Firefox 中不扭曲。我应该如何处理这个问题?

java - 有没有什么工具可以让我们检查我们的Web应用程序在各种浏览器及其版本之间的兼容性?

html - 在 inline-block 元素中使用 max-width

css - Bootstrap 下拉菜单问题

passwords - 2016 年 Firefox 密码恢复

jsf - Richfaces 与 Internet Explorer 11 的兼容性问题

javascript - "KeyboardEvent.key"值跨浏览器一致吗?