IE11 niewyraźna prawa krawędź DIV z promieniem granicznym

Question

Dec 03, 2013, 11:44 AM

IE11 niewyraźna prawa krawędź DIV z promieniem granicznym

Mam problem w IE 11 (w Windows 7), gdzie prawa krawędź DIV o określonym promieniu granicznym wygląda na rozmazaną. Spójrz na ten przykład: -

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Test Page</title>
    <style>
        body {
            background-color: red;
        }
        .Container {
            background-color: black;
            margin-left: auto;
            margin-right: auto;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 10px;
            min-height: 300px;
            width: 600px;
        }
        .Surround {
            background-color: lightgreen;
            border-radius: 7px;
            float: left;
            padding: 6px;
            width: 588px;
        }
        .Inner {
            background-color: blue;
            border-radius: 7px;
            color: white;
            float: left;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="Container">
        <div class="Surround">
            <div class="Inner">
                <h2>Test</h2>
            </div>
        </div>
    </div>
</body>
</html>

Aby rozpocząć, strona zazwyczaj wygląda dobrze. Jednak zmień rozmiar strony, tak aby pionowy pasek przewijania pojawił się (czyniąc stronę wystarczająco małą, aby przejść do sekcji Black DIV). Należy wtedy zauważyć, że prawa krawędź zarówno niebieskich, jak i zielonych pól jest rozmyta.

Uwaga: Czasami strona jest rozmazana na początku i staje się ostra po włączeniu pionowego paska przewijania, wydaje się, że zależy od rozmiaru strony IE.

Jeśli pozbędę się promienia granicznego, rozwiązuje problem. Jeśli pozbędę się auto-marginesu i auto-marginesu, aby strona była wyrównana do lewej, rozwiązuje problem. Wydaje się więc, że jest to kombinacja wyśrodkowanych stron o określonym promieniu granicznym.

Ktoś wie, jak rozwiązać ten problem? Zakładam, że jest to błąd IE 11, ponieważ działa dobrze w IE 10, IE 9, Chrome, Firefox.

JSFIDDLE:http://jsfiddle.net/UjpSe/

Od tego czasu próbowałem tego na trzeciej maszynie IE 11 w systemie Windows 7 i nie działa to poprawnie na 2 komputerach. Nie jestem więc pewien, czy może to być karta ustawień / karta graficzna.

JSFIDDLE powyżej może sprawić, że się nie uda, o ile okno jest wystarczająco duże, aby DIV był wyśrodkowany na stronie i można włączyć pionowy pasek przewijania przy zmianie rozmiaru.

Edytuj: obrazy dodane zgodnie z żądaniem. Zmieniłem rozmiar strony z 600px szerokości do 300px, aby zmieścić się w Stack Overflow. Pierwszy obraz ma rozmazaną prawą krawędź ...

Dokładnie ta sama strona nie ma prawej krawędzi rozmycia, gdy rozmiar strony jest zmieniany tak, aby nie miał paska przewijania ...