javascript - CSS 问题 : Chrome adds 3px extra margin-right to text field

Question

我有 3 个文本字段。他们每个人都有 margin-right: 5px。谷歌浏览器会自动在每个元素的右边距上添加 3-4 像素。我不知道如何解决这个问题。我注意到这一点是因为当我使用 JQUERY 在点击事件上生成更多文本字段时。我没有看到这些额外的 margin 。这些额外的边距仅在元素从我的 HTML 呈现时添加，而不是从我的 Javascript 中的字符串呈现。任何想法？谢谢。

HTML:

<input type="text" class="text_input" name="field_class_0" />
<input type="text" class="text_input" name="field_book_title_0" />
<input type="text" class="text_input" name="field_isbn_0" />

CSS:

.text_input {
margin: 0 5px 5px 0;
padding: 5px 7px;
}

https://jsfiddle.net/3g42rjdp/2/

Answer 1

尽管这可能取决于浏览器版本，但 Chrome 通常对 input 元素具有以下 CSS 规则:

-webkit-appearance: textfield;
background-color: white;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
padding: 1px;
border: 2px inset;

这些用于input、textarea、keygen、select、button:

text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;

这用于input、textarea、keygen、select、button , meter, progress:

-webkit-writing-mode: horizontal-tb;

因此，这与浏览器样式表规则无关。

更新

如果你添加一个空格

• 空间
• 标签
• newine ( 这是你的情况 )

它们之间会出现缝隙。

视情况而定，您可以使用以下任一方法来消除间隙:

• 添加一个负的margin-left
• 使用 float

• 去掉元素之间的空白，可以做到:

  1- 将主题放在一行

  <input type="text"><input type="text"><input type="text">
  

  2- 删除空格(别担心，这是正确的!:))

  <input type="text"><
  input type="text"><
  input type="text">
  

  3- 使用 HTML 注释

  <input type="text"><!--
  --><input type="text">
  

  我建议您使用1 号 方法(将主题放在一行中)，但两者都可以。