Safari中的輸入/按鈕渲染不一致性

我當時正在玩一個輸入欄的flex佈局，右邊有一個按鈕。它在Chrome和Firefox中運行良好，但在Safari中出現異常。我添加了一個代碼筆鏈接來查看問題。Safari中的輸入/按鈕渲染不一致性

如果您使用Chrome瀏覽筆和調整其大小縮放，並保持在一起巨大的窗口。如果您在Safari中執行相同的操作，則會看到提交按鈕和輸入字段之間存在細微差距。同樣，當您縮小瀏覽器的尺寸時，您會看到提交按鈕文本被截斷。試圖找到一種通過所有3種瀏覽器使其一致的方法。

HTML文件

<div class="container"> 
<form class="input-group"><input placeholder="Search For Videos" value=""><span class="input-group-btn"><button type="submit" class="btn">Submit</button></span></form> 
</div>

SCSS文件從示出的Safari切割按鈕的右側文本時窗口被縮放到較小尺寸代碼筆

$border-radius: 4px; 
$search-font-size: 14px; 
$search-padding: 10px; 

.input-group{ 
    position: relative; 
    display: flex; 
    display: -webkit-flex; 
    width: 100%; 

    input{ 
    display: block; 
    width: 100%; 
    padding: $search-padding; 
    font-size: $search-font-size; 
    color: #333; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #d2d1d1; 
    border-radius: $border-radius; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0; 
    outline: none; 
    } 
    .input-group-btn{ 
    position: relative; 
    vertical-align: middle; 
    margin-left: -1px; 
    z-index: 2; 
    white-space: nowrap; 
    display: flex; 
    display: -webkit-flex; 

    .btn{ 
     display: inline-block; 
     font-weight: normal; 
     text-align: center; 
     white-space: nowrap; 
     vertical-align: middle; 
     cursor: pointer; 
     outline: none; 
     border: 1px solid transparent; 
     padding: $search-padding; 
     font-size: $search-font-size; 
     border-radius: $border-radius; 
     border-bottom-left-radius: 0; 
     border-top-left-radius: 0; 
     background-color: #fff; 
     border-color: #ccc; 
    } 
    } 
}

屏幕快照。

- 更新 - 問題解決了由於有關彈性收縮特性Michael_B評論。

從刪除以下。輸入基的BTN

顯示：彎曲;
display：-webkit-flex;

我已經有這些設置在父母上，所以在這種情況下需要設置他們對孩子。

然後添加以下。輸入基的BTN

-webkit-FLEX收縮：0;
flex-shrink：0;

這解決了Safari中的問題。

來源

2017-02-28 me-me

添加到您的代碼：

.btn { margin-left: 0; }

來源

2017-03-01 00:03:39

，對於缺口問題，但我提到的第二個問題的偉大工程仍然存在。「當你縮小瀏覽器的尺寸時，你會看到提交按鈕文本被截斷」。 1下來1去:)謝謝 –

是的，我知道你提到的第二個問題。但它在我的Safari中不存在。所以我只解決了我可以重現的問題。 –

但是，請考慮：flex項目默認設置爲收縮（'flex-shrink：1'）。也許考慮禁用收縮。將此添加到您的項目中：'flex-shrink：0'。 –

Safari中的輸入/按鈕渲染不一致性

回答

相關問題