处理textarea高度crossbrowser

Question

我试图在textarea下面绝对定位一个按钮，我在按钮旁边有一些内容我想不要按下它。

＆＃13;

＆＃13;

html {
  background: #1f252e;
  color: white;
  font-family: sans-serif;
}
.commentForm {
  position: relative;
}
.textInput {
  padding: 10px;
  background: rgba(0, 0, 0, 0.08);
  border: solid 1px rgba(255, 255, 255, 0.05);
  position: relative;
  border-radius: 2px;
  height: 55px;
  overflow: hidden;
  z-index: 1;
}
.textInput__input {
  color: white;
  width: 100%;
  resize: none;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  background: transparent;
  margin: 0px;
  outline: none;
  border: none;
  display: block;
}
.textInput:hover {
  cursor: text;
  background: rgba(255, 255, 255, 0.05);
}
.formField.hasErrors .wd-input {
  border-color: #e43e22;
}
.wd-form__footer {
  margin-top: 15px;
  display: flex;
}
.formField__error {
  margin-top: 15px;
  font-size: 13px;
  color: #e43e22;
}
.wd-button--primary {
  background: rgba(0, 0, 0, 0.25);
  height: 35px;
  min-width: 50px;
  padding: 10px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
  font-size: 14px;
}
.wd-button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  box-sizing: border-box;
}

.wd-form__status {
  flex-grow: 1;
}

.commentForm__actions {
  position: absolute;
  top: 90px;
  right: 0px;
}

＆＃13;

<div class="commentForm wd-form">
  <div class="form">
    <div class="formField hasErrors" style="max-width: 100%;">
      <div class="textInput wd-input ">
        <textarea rows="3" class="textInput__input" placeholder="Type a comment..."></textarea>
      </div>
      <div class="formField__error">15 more characters to go...</div>
    </div>
    <div class="wd-form__footer">
      <div class="wd-form__status">
        <div class="formStatus"></div>
      </div>
      <div class="commentForm__actions wd-form__actions">
        <a role="button" class="wd-button wd-button--primary">
          <div class="wd-button__label">Post comment</div>
        </a>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在，在Firefox和Chrome中，我得到了非常不同的结果。

在Chrome中按钮正确对齐：

但是在firefox中，按钮是用textarea剪切的：

这是因为Firefox中的文本区域高度与Chrome中的不同。我该如何解决这个问题？

Answer 1

如果可以，我倾向于远离position: absolute。您可以使用float: right和负余量。

html {
  background: #1f252e;
  color: white;
  font-family: sans-serif;
}
.commentForm {
  position: relative;
}
.textInput {
  padding: 10px;
  background: rgba(0, 0, 0, 0.08);
  border: solid 1px rgba(255, 255, 255, 0.05);
  position: relative;
  border-radius: 2px;
  height: 55px;
  overflow: hidden;
  z-index: 1;
}
.textInput__input {
  color: white;
  width: 100%;
  resize: none;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  background: transparent;
  margin: 0px;
  outline: none;
  border: none;
  display: block;
}
.textInput:hover {
  cursor: text;
  background: rgba(255, 255, 255, 0.05);
}
.formField.hasErrors .wd-input {
  border-color: #e43e22;
}
.wd-form__footer {
  margin-top: -15px;
}
.formField__error {
  margin-top: 15px;
  font-size: 13px;
  color: #e43e22;
}
.wd-button--primary {
  background: rgba(0, 0, 0, 0.25);
  height: 35px;
  min-width: 50px;
  padding: 10px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
  font-size: 14px;
}
.wd-button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  box-sizing: border-box;
}

.wd-form__status {
  flex-grow: 1;
}

.commentForm__actions {
  position: absolute;
  top: 90px;
  right: 0px;
}

<div class="commentForm wd-form">
  <div class="form">
    <div class="formField hasErrors" style="max-width: 100%;">
      <div class="textInput wd-input ">
        <textarea rows="3" class="textInput__input" placeholder="Type a comment..."></textarea>
      </div>
      <div class="formField__error">15 more characters to go...</div>
    </div>
    <div class="wd-form__footer">
      <div class="wd-form__status">
        <div class="formStatus"></div>
      </div>
      <div class="commentForm__actions wd-form__actions">
        <a role="button" class="wd-button wd-button--primary">
          <div class="wd-button__label">Post comment</div>
        </a>
      </div>
    </div>
  </div>
</div>