Android Browser使用較大的邊框錯誤地渲染邊框半徑

我在Android Webkit瀏覽器中遇到問題。這發生在Android 4.0.3和更早版本上。該設計要求在一個div內有一個15像素的頂部邊框，然後是圓角。我使用的邊界半徑來實現這一點，並能正常工作在所有的現代瀏覽器，但在Android上，它看起來像這樣：Android Browser使用較大的邊框錯誤地渲染邊框半徑

的HTML看起來像這樣：

<section class=" sub_nav" id="quick_access_section"> 
<header> 
    <h1>Headline</h1> 
    </header> 
    <div class="wrapper cw_humans"> 
     .... 
     <div class="text">Nam condimentum viverra nulla sed pulvinar nisl posu</div> 
     .... 
     </div> 
    </div> 
</section>

的CSS外觀像這樣：

section { 
    background: #f2f4f7; 
    border-top: 15px solid #1a293a; 
    border-radius: 6px; 
    -webkit-box-shadow: 0px 5px 10px #bfc4ca; 
    -moz-box-shadow: 0px 5px 10px #bfc4ca; 
    box-shadow: 0px 5px 10px #bfc4ca; 
    margin: 0 auto; 
    width: 80%; 
}

在Chrome上的Mac OS，蘋果的WebKit和Androi鉻它看起來像這樣：

我很好奇，如果有人以前見過這個。我已經使用了沒有效果的webkit前綴，正如我所預料的那樣。

來源

2012-07-18 Conner

android的px可能不同，因爲顯示不同，所以使用獨立於設備的測量將有助於保持一切不變。 Em是一種簡單的方法，因爲它們相對於默認字體大小（通常爲16px）保持不變。默認的字體大小可以通過使用CSS給所有的瀏覽器相同的起點來修改。

來源

2012-07-20 19:06:55

在Android上對邊框半徑使用em測量根本不起作用。無論如何，px中的測量值都被解釋爲「虛擬像素」，而不是設備像素。 – Pointy 2012-12-20 15:30:41

Android Browser使用較大的邊框錯誤地渲染邊框半徑

回答

相關問題