Question

编辑：我在这个问题的底部添加了相关代码。正如你在那里看到的那样，按钮被包裹在一个div中。此外，这个问题只发生在一个浏览器中，即Firefox，我将使用黑客攻击仅针对该浏览器。

我有一个提交类型的输入元素（即基本上是一个提交按钮）。此元素中显示的文本（在元素的值属性中定义）显得太低（即，太靠近按钮的底部而不是垂直居中）。按钮有一个固定的高度。

当然，我想移动按钮的文本，如 value 属性中所定义，向上一个或两个像素。

我用按钮的填充（顶部和底部）尝试了一些东西，但这并没有改变任何东西。 [这是预期的，顺便说一下吗？]因此，我想使用相对定位来向上移动文本。

然而，问题是我需要定位文本本身，而不是输入/按钮元素。这当然是因为按钮本身应该保持在当前位置，我只想移动按钮上显示的TEXT。

因此我的问题是：在CSS中，是否有一种方法可以不是按钮而是仅显示其显示的文本（如 value 属性中所定义的）？

当然，也欢迎其他解决方案（仅限CSS）。

代码：

HTML：

<form id="zoekform">
   <input type="text" class=""  id="search-text" name="search-text" placeholder="Search"> 
   <div class="erom" id="erom2">
      <input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
   </div>
</form>

CSS：

#zoekform {
    height: 29px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 9px;
 }

 .erom {
   height: 100%;
   display: inline-block;
   box-sizing: border-box;
}

   #erom2 {
      border: solid 1px #452F5D;
      width: 27%;
      display: inline-block;
      box-sizing: border-box;
   }

   #zoekknop {
      float: right;
      height: 100%;
      color: white;
      font-size: 19px;
      box-sizing: border-box;
      background-color: #446666;
      color: white;
      letter-spacing: 2px;
      border: solid 1px white;
      width: 100%;
    }

最后我只针对Firefox的部分，以及我无法使填充工作的部分（并且确定，“媒体查询”（它不是真正的媒体查询）确实有效，并且在任何地方我在没有媒体查询的情况下尝试过这种情况，即作为常规CSS的一部分）：

@-moz-document url-prefix() { 
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}

Answer 1

由于某些原因，表单元素对于字体特别且古怪。

为<submit>的父级分配字体，然后使用font: inherit按钮上的<submit>。
在<submit> line-height 1.4 2 px em上注意line-height或<form>。实际上我通过继承1.4 width中的字体来分配ex。
使用ex测量单位设置x。一个9ex与input::-moz-focus-inner { border: 0; padding: 0; /* Some users have said these last two are unnecessary or should be -2px */ margin-top:0; margin-bottom: 0; }字符一样宽，使其成为衡量您使用的文字空间的绝佳方式。我使用#zoekknop {.... .... border: 2px double white; line-height: 1.65; vertical-align: baseline; } #search-text { line-height: 1.75; vertical-align: baseline; padding: 4px 3px 0; }表示6个字符（即提交）。

此规则集可以帮助您使用Firefox：

#form {
  font: 400 16px/1.4'Verdana';
}
#form .sub {
  font: inherit;
  width: 9ex;
  color: blue;
  border-radius: 5px;
}
#form .sub:hover {
  color: cyan;
  background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#zoekform {
  height: 29px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 9px;
  font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
  
  color: white;
  font-size: 18px;
  box-sizing: border-box;
  background-color: #446666;
  color: white;
  
  border: 2px double white;
  line-height: 1.65;
  vertical-align: baseline;

}
#search-text {
  line-height: 1.75;
  vertical-align: baseline;
  padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

以下是我对您的按钮和搜索字段所做的一些更改：

<form id="form" name="form">
  <input type="submit" class="sub" value="Submit" />
</form>

<form id="zoekform">
  <input type="text" class="" id="search-text" name="search-text" placeholder="Search">
  
    <input id="zoekknop" type="submit" method="GET" value="Search!" />
  
</form>

查看下面的代码段：

Environment > Shared Libraries

PopoverPresentationController

Answer 2

This should work
#buttonID{
  width: 500px;
  height: 500px;
  padding-bottom: 100px;//pushes text up inside the button
}

Answer 3

确保定义按钮的高度，宽度，行高，字体大小和填充。然后你应该能够操纵填充和行高以获得你想要的结果。听起来这个按钮可能会继承导致问题的行高。

定位文本本身并不是解决这个问题的方法。查看按钮的CSS和HTML会很有帮助，并注意问题出现在哪个浏览器中。

CSS：设置输入元素的文本样式（与输入元素本身相对）？

3 个答案: