テキストエリアの高さクロスブラウザを扱う

Question

私はテキストエリアの下にボタンを絶対的に配置しようとしていますが、ボタンの隣にいくつかのコンテンツがあります。今

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; 
 
}

<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>

、FirefoxとChromeで私は非常に異なる結果が得られます。

Chromeのボタンが適切に整列されています

しかし、Firefoxでは、ボタンは、テキストエリアにクリッピングされています

テキスト領域の高さがあるためですFirefoxではFirefoxとは異なります。これをどうやって解決するのですか？

Answer 1

可能であれば、私はposition: absoluteから離れる傾向があります。代わりに、float: rightと負のマージンを使用できます。 `formField__error`私は避けるようにしようとしています正確に何をしている、それを押し下げしようとしている時に助けにはならない

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>