Закругленные углы на div, используемые в качестве портала для большей ошибки рендеринга div или моей ошибки? - PullRequest
Новая
       32

Закругленные углы на div, используемые в качестве портала для большей ошибки рендеринга div или моей ошибки?

0 голосов
/ 11 марта 2012

У меня есть div, который намеренно меньше, чем его содержимое (я делаю виджет скользящего переключения). Я хочу, чтобы контейнер имел закругленные углы. В FireFox он отображается так, как задумано, но Chrome и Safari отображают внутреннее содержимое в области между тем, где закругленные углы находятся, и тем, где будут квадратные углы. Я не могу поставить закругленные углы на внутреннем контенте, так как нет решения, подходящего для всех сценариев (переключение влево, переключение вправо, переключение в движении). Вот что у меня есть: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>DIV test</title>

        <style type="text/css">
            body {
                font-size               : 3em;
            }
            #frame {
                border                  : thin solid black;
                /* background: #a0a0ff; */
            }
            #portal {
                background              : none;
                margin                  : 20px;
                display                 : inline-block;

                -moz-border-radius      : 29px;
                -webkit-border-radius   : 29px;
                -khtml-border-radius    : 29px;
                border-radius           : 29px;
                border                  : thin solid black;

                width                   : 400px;
                overflow                : hidden;
                height                  : 4em;
                line-height             : 4em;
            }
            #inner {
                position                : relative;
                width                   : 900px;
                background              : #a0ffa0;
                z-index                 : -100;
                margin-left             : -150px;
            }
        </style>

    </head>
    <body>
        <div id="frame">
            <div id="portal">
                <div id="inner">Here are some partially visible words</div>
            </div>
        </div>
    </body>
</html>

Это ошибка рендеринга в браузерах WebKit, или я что-то делаю не так и мне везет с FireFox?

1 Ответ

1 голос
/ 11 марта 2012

Не уверен, что это ошибка, но это отстой.Однако попробуйте это исправить: http://jsfiddle.net/tpe36/1/

Работает в Chrome и Firefox для меня.

HTML: 

<div id="frame">
    <div id="portal">
        <div id="container">                
            <div id="inner">Here are some partially visible words</div>
        </div>
    </div>
</div>

CSS: 

#inner {
    position                : relative;
    width                   : 900px;
    z-index                 : 1;
    margin-left             : -150px;
}
#container {
    background              : #a0ffa0;
}
​
...