代码之家  ›  专栏  ›  技术社区  ›  Marcus Junius Brutus

Firefox输入字段中剪切的下一级

css html
  •  1
  • Marcus Junius Brutus  · 技术社区  · 7 年前

    我有以下代码: 

    <html>
  <head>
    <style>
     input {
       /* line-height: 1.6em; */ /* doesn't seem to make any difference */
       height: 1.6em;
     }
    </style>
  </head>
  <body>
    <form action="foo" method="POST" enctype="multipart/form-data">
      <label>First Name:</label> <input type="text" value=""/>
    </form>
  </body>
</html>

    当我将代码放在文件系统或JBoss服务器的文件中并导航到它时,Firefox 57.0.3 未将文本输入字段渲染得足够高,导致所有字母的下一个字母被剪裁:

    enter image description here

    Chrome渲染效果很好。

    奇怪的是 jsfiddle 从Chrome和Firefox中正确渲染。

    我做错了什么?为什么我不能在JSFIDLE中复制它?

    我会假设 1em 应该足够了,更不用说 1.6em .

    1 回复  |  直到 7 年前
        1
  •  1
  •   user247702    7 年前

    这可能是由于字体的组合,以及小于默认值 height 价值在我的系统上,默认字体大小为 13.3333px 默认(计算)高度为 23px . 这是约1.725的比率,略高于 1.6em .

    1em 高度不够,因为要绘制输入字段需要使用边框和填充。请参见下面的盒子模型:

    screenshot of box model

    由于CSS规范化,您无法在JSFIDLE中复制它 active by default .

    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    3 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    3 月前
    magenta placenta  ·  将css变量合并为一个变量
    3 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    4 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    4 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    4 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    4 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    4 月前
    Luckkks  ·  过渡色工作不正常
    4 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    4 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号