爲什麼邊界半徑在IE中不顯示？

我在我的html中有一個<input type=image>元素。在我的CSS我有border-top-right-radius:12px;和border-bottom-right-radius:12px。

一切適用於Chrome和Firefox，但在IE11中，圖像以圓角而不是圓角顯示。

我也有這個元標記在我的HTML： <meta http-equiv="X-UA-Compatible" content="IE=9" />

的代碼如下。
CSS：

body .overlay { 
    background-color: rgba(0, 114, 198,.7);    
    height:100%; 
    position:relative; 
} 
body .layer { 
    background: url('photo-homebanner.jpg') 55%; 
    position:relative; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 
body .goldenDiv { 
    width:665px; 
    height:326px; 
    position:fixed; 
    z-index:100; 
    margin-top:-38px; 
    margin-left:-8px; 
}  
body h1 { 
    color:white; 
    text-align:center; 
    font-family:sans-serif; 
    padding-top:22px; 
    padding-bottom:5px; 
    font-size:45px; 
} 
body h3 { 
    color:white; 
    text-align:center; 
    font-family:sans-serif; 
    font-weight:100; 
    padding-bottom:14px; 
} 
body h3.hidden { 
    visibility:hidden; 
    padding-bottom:0px; 
    position:absolute; 
    top:220px; 
    left:190px; 
} 
body input:focus { 
    outline:none; 
} 
body .prettyInput { 
    align-content: center; 
    padding-left: 20px; 
    padding-right: 70px; 
    margin-left: 106px; 
    width: 350px; 
    height: 61px; 
    font-size: 18px; 
    font-weight: 600; 
    border-radius: 15px; 
    border: hidden; 
    margin-bottom: 40px;   
} 
body .inputOverlap { 
    position:absolute; 
    top:167px; 
    top:166px\9; 
    left:485px; 
    z-index:3; 
    border-top-right-radius:12px; 
    border-bottom-right-radius:12px; 
} 
body hr { 
    color:white; 
    position:absolute; 
    top: 77px; 
    left:120px; 
    align-content:center; 
} 
@-moz-document url-prefix() { 
    body .inputOverlap { 
     position:absolute; 
     top:168px; 
     left:485px; 
     z-index:3; 
     border-top-right-radius:12px; 
     border-bottom-right-radius:12px; 
    } 
}

HTML：

<body> 
    <div class="goldenDiv"> 
     <div class="layer"> 
      <div class="overlay"> 
       <h1>Stay ahead of industry news!</h1> 
       <hr width="450px"/> 
       <h3>Let us send you the latest from our Marketing Department.</h3> 
       <input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" /> 
       <input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" /> 
       <h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3> 
       <h3>100% privacy, no spam, just news.</h3> 
      </div> 
     </div> 
    </div> 
</body>

來源

2016-03-03 Adam

將插入頭部。例如：http://stackoverflow.com/questions/22018567/ie11-border-radius-and-border-bug – JMF

嗯，這沒有奏效。 – Adam

似乎是IE瀏覽器渲染按鈕標籤邊框半徑的錯誤。給'input [type =「image」]添加一個邊框，你會看到它將圖像渲染到邊框的頂部（即：忽略邊框邊界）。你可以通過將'input [type =「image」]'包裝在一個'div'中來避開它，這個div應用了相同的大小/邊界約束，就是你絕對放置的位置，並且有'overflow：hidden';' – abluejelly

這個問題似乎是與input[type="image"] IE的渲染 - 如果你給它一個border屬性，你可以看到圖像渲染忽略border-radius財產。修復

最簡單的方法是將包裹input[type="image"]在div，應用定位，邊境，並以div上漿性能（適用於大小爲input[type="image"]爲好），並與overflow:hidden;標記股利。

文體筆記（無關的問題）：

border-radius: 0 12px 12px 0;意味着同樣的事情

border-top-right-radius:12px; 
border-bottom-right-radius:12px;

但少於一半的初始位置。我建議只使用詳細版本，如果你只需要調整一個角落並且希望其他人被設置爲保留的任何角落。

圖像上的height和width屬性應該在CSS上input[type="image"]被設置爲不。這些屬性在很長一段時間內都被忽視了，特別是因爲CSS完成了同樣的事情。

來源

2016-03-04 17:26:37 abluejelly

爲什麼邊界半徑在IE中不顯示？

回答

相關問題