当前位置: 首页 > 知识库问答 >
问题:

Firefox vs Chrome内容可编辑填充

都浩淼
2023-03-14

在此示例中:http://jsfidle.net/kyhvw/

#test1 {
  position:absolute;
  font-size:10px;
  font-family:arial;
  background:black;
  padding:2px;
  border-radius:2px;
  color:white;
}

<span id="test1" contentEditable="true"></span>

在Chrome中,我得到一个15px高的背景,我的字体是7px高,顶部和底部有4px的填充。这就是我希望它在其他浏览器上显示的方式(不过,奇怪的是它不是一个10px的字体和2px的填充。)

在Firefox中,在输入任何文本之前,我会看到一个4px高的背景。一旦我将文本放入其中,框将扩展到18px,底部为6px,顶部为5px,字体为7px。我怎样才能使这个工作与FF而不搞乱它为Chrome?

为了纠正FF中4px高背景的问题,我尝试使用min-height:15px。在FF和Chrome中,它不是将框设置为15px,而是将框设置为19px高,只是在Chrome中,它是一个7px字体,顶部有4px填充,底部有8px填充,而在FF中,它是一个7px字体,顶部有5px填充,底部有7px填充。(使用min-height:11px在FF中输入文本之前得到一个15px的框,然后是18px,而在Chrome中则前后保持15px。)

共有1个答案

聂迪
2023-03-14

啊哈,我找到了一个使用line-heightmin-height组合的可行解决方案。这给了我一个15px的盒子和4px填充在顶部/底部的FF和铬。http://jsfidle.net/4wemj/

 类似资料:
  • 问题内容: 使用什么是能够编辑内容的最佳方法? 在我理想的情况下, 添加的 生日将是一个超链接,点击该链接将显示一个编辑表单-与带有更新按钮的当前添加表单相同。 实时预览(插播) HTML: App.js: 问题答案: 您应该将表单放在每个节点内,分别使用和启用和禁用编辑。像这样: 这里的关键点是: 我已将控件更改为本地范围 已添加到,因此我们可以在编辑时显示它 添加了带有的,以便在编辑时隐藏内容

  • 是否可以编辑不能在C#中填写的PDF格式 > 现有的PDF包含图像、填充了数据和文本的表格。 已经尝试了itextsharp,但无法识别任何操作数据的AcroFields。

  • 问题内容: 我正在使用contenteditable属性更新电话列表中的电话名称。我曾尝试使用ng-change,但多数民众赞成在没有被解雇。有什么办法可以做到吗? 我有一个清单 因此,现在编辑电话名称时,需要在列表中进行更新。 我已经尝试过使用指向元素的模型进行类似的操作。这是行不通的。 也 但在这种情况下,该方法不会被触发。 问题答案: 编辑 这是一个基于Angular文档中示例的示例,该示例

  • 问题内容: 我正在尝试将a的值存储到我的JS代码中。但是我找不到在这种情况下为什么不起作用的原因。 有解决方法吗? 参见: JSFiddle 注意: 我正在创建一个文本编辑器,因此当用户将HTML存储在其后时,用户应该看到结果。(即,用户在存储以下内容时看到:“这是一个 示例 !”) 问题答案: contenteditable标签不能直接与angular的ng模型一起使用,因为contentedi

  • 基本步骤:-用户点击一个web按钮,此在线web应用程序背后的系统向用户发送一封带有PDF文档的电子邮件,该文档包含用户保存的应用程序的所有细节,例如全名、邮编、dob、一些问题的答案(tickboxes)、自由文本注释区-用户打开此PDF,更改一些细节,例如更新注释区的文本、取消勾选某些复选框、更改邮政代码-用户保存更改并将PDF发送回我们。-系统读取PDF、解析内容并更新数据库中的数据。 上述

  • 问题内容: 在使用控制台输出和测试结果作为电子邮件正文的从属作业完成后,我正在使用可编辑电子邮件通知来发送电子邮件。 我还需要在电子邮件中直接添加指向实际构建构建文件夹的链接,是否有一种简单的方法?也许某种令牌?我没有找到有关如何直接链接到构建文件夹以在电子邮件中显示其位置的任何线索。 问题答案: 首先,点击 Content Token Reference* 旁边的问号,这将告诉您所有需要的内容。