bobbix: Problem in Google Chrome bei padding-Prozentwerten

Beitrag lesen

SELF-Forum

Problem in Google Chrome bei padding-Prozentwerten

bobbix
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe folgendes Problem:

Ich habe ein DIV mit einem Innenabstand nach oben von 2%. Danach folgt eine Liste, deren Elemente in zwei Spalten nebeneinander liegen und einen Innenabstand ebenfalls von 2% nach oben haben.

Verkleinert man den Viewport im Google Chrome (bei mir auf 544 Pixel Breite), entstehen 1 Pixel große weiße Abstände zwischen einigen Listenelementen. Im IE und Firefox tritt dieses Problem nicht auf.

Ich habe den Code soweit es geht reduziert und dabei festgestellt, dass die prozentualen Padding-Werte das Problem auslösen. Leider kann ich auf diese nicht verzichten.

  
<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Test</title>  
        <style type="text/css">  
            div {  
                padding-top: 2%;  
                background-color: #0f0;  
            }  
            ul {  
                list-style: none;  
            }  
            li {  
                float: left;  
                padding-top: 2%;  
                width: 50%;  
                background-color: #f00;  
            }  
        </style>  
    </head>  
    <body>  
        <div>Logo</div>  
        <ul>  
            <li>1. Link</li>  
            <li>2. Link</li>  
            <li>3. Link</li>  
            <li>4. Link</li>  
            <li>5. Link</li>  
            <li>6. Link</li>  
        </ul>  
    </body>  
</html>

Wäre toll, wenn jemand eine Idee hat, wie man mein Problem lösen könnte.

Vielen Dank.

Liebe Grüße

Beitrag melden
–
Informationen zu den Bewertungsregeln