奇怪的邊框粗細加入^ h標籤內按鈕

我加入啊元素內按鈕時，該按鈕樣式是的1px的固體邊界，其工作正常其他地方一樣，但是當我加入這裏面啊標籤的界限變得一個奇怪的重量，所以它看起來不像1px了奇怪的邊框粗細加入^ h標籤內按鈕

我注意到這是因爲在h2的transform屬性，如何才能正確地實現1px的轉換和邊界？

h2 { 
 
    margin: 32px 32px 64px; 
 
    -webkit-transform: translateY(30%); 
 
    transform: translateY(30%) 
 
} 
 

 
.c-btn { 
 
    display: inline-block; 
 
    padding: 8px 16px; 
 
    cursor: pointer; 
 
    transition: 500ms; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    outline: none; 
 
    line-height: inherit; 
 
    background-color: transparent; 
 
    border: 1px solid black; 
 
    color: black; 
 
    font-size: 18px; 
 
    letter-spacing: 2px; 
 
}

<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>

Here is a JSfiddle for reference

來源

2017-08-23 John R

只有邊界是1px，如果你想刪除H2的翻譯，然後做'h2 {-webkit-transform：translateY（0）; transform：translateY（0） ;}'翻譯不會發生。 –

我需要的翻譯，是的，邊界1px的，如果你運行的代碼片斷，你會看到該按鈕確實有邊界比1px的較重的，如果我刪除的轉換不會發生，但我需要做的變換... –

將代碼中的jsfiddle後，裏面H1一個按鈕和一個外面，我看到的那種模糊邊界的裏面H1的按鈕。 https://jsfiddle.net/fp2xf37v/不知道是什麼導致它。 –

試試這個。

h2 { 
 
    margin: 32px 32px 64px; 
 
    -webkit-transform: translateY(30%) translateX(0%); 
 
    transform: translateY(30%) translateX(0%); 
 
} 
 

 
.c-btn { 
 
    display: inline-block; 
 
    padding: 8px 16px; 
 
    cursor: pointer; 
 
    transition: 500ms; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    outline: none; 
 
    line-height: inherit; 
 
    background-color: transparent; 
 
    border: 1px solid black; 
 
    color: black; 
 
    font-size: 18px; 
 
    letter-spacing: 2px; 
 
}

<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>

來源

2017-08-23 20:16:56

謝謝，如果我運行這個代碼狙擊手，我仍然得到邊界行爲 –

這似乎是在瀏覽器的錯誤，解決這個問題最簡單的方法就是用的0.1％十進制值添加轉換的翻譯功能如下所示。請結算有關詳細信息，引用在此問題上

/* Fixing CSS for h2 blurry borders*/ 
 
h2 { 
 
    margin: 32px 32px 64px; 
 
    -webkit-transform: translateY(31.1%); 
 
    transform: translateY(31.1%) 
 
} 
 
/* Original CSS for h2 */ 
 
h2#title-2 { 
 
    margin: 32px 32px 64px; 
 
    -webkit-transform: translateY(30%); 
 
    transform: translateY(30%) 
 
} 
 

 
.c-btn { 
 
    display: inline-block; 
 
    padding: 8px 16px; 
 
    cursor: pointer; 
 
    transition: 500ms; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    outline: none; 
 
    line-height: inherit; 
 
    background-color: transparent; 
 
    border: 1px solid black; 
 
    color: black; 
 
    font-size: 18px; 
 
    letter-spacing: 2px; 
 
}

<!-- without issue --> 
 
<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2> 
 
<!-- with issue --> 
 
<h2 id="title-2">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2> 
 

 
<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button>

參考文獻：

CSS3 Transform Blurry Borders

來源

2017-08-23 20:20:06

謝謝，如果我在safari中運行這兩個選項顯示邊界奇怪的行爲 –

@JohnR另一種替代方法是將h2作爲'.h2 { padding：2px; padding：2px; -webkit變換：平移Y（30％）; 變換：平移Y（30％）;}'這也似乎是解決這個問題，你也可以改變填充值和模糊消失了，對不起，我沒有Safari瀏覽器來測試和確認。 –

謝謝，我在這裏找到了解決方案：enter link description here

見perspective (1px) 2014年的更新

來源

2017-08-23 21:06:24

幹得好，找到解決方案:) –

奇怪的邊框粗細加入^ h標籤內按鈕

回答

相關問題