小编Den*_*man的帖子

我正在制作一张可以在100%边界半径内盘旋的图像.
当你将它悬停时,图像会缩放.现在出现了问题.当我将其悬停时,您将在边界半径之外看到图像1秒.

它似乎在Firefox中工作.但不是在chrome和Safari中.

现场演示:http:
//jewelbeast.com/something/imghover/rounded.html

HTML:

    <div class="rounded-smallborder">
        <section class="img-scale img-opacity" style="width: 250px; height: 250px;">
            <img src="http://placehold.it/250x250" />
            <div class="text">
                <span>
                    <h1>This is a title</h1>
                    <ul>
                        <li>List number 1</li>
                        <li>List number 2</li>
                        <li>List number 3</li>
                    </ul>
                </span>
            </div>
        </section>
    </div>

CSS:

div.rounded-smallborder{
    margin-top: 22px;
    margin-bottom: 22px;
    height: 362px;
    width: 228px;
    float: left;
    display: block;
    margin-left: 10px;
}

div.rounded-smallborder section{
    position: relative;
    width: 217px;
    height: 217px;
    -webkit-border-radius: 100%;  
  -moz-border-radius: 100%;  
  -ms-border-radius: 100%;  
  -o-border-radius: 100%;  
  border-radius: 100%; …

我正在创建一个垂直下拉菜单.
当您单击其中一个菜单项时.下拉列表将从宽度:0px变为宽度:500px; 由于某种原因,它不适用于FireFox和IE.在我开始之前,我在Jsfiddle.net上创建它,它适用于每个浏览器.

在jsfiddle中制作的第一个菜单:

适用于Chrome - FireFox - IE - Safari和Opera.
http://jsfiddle.net/DennisBetman/3AyHK/

官方菜单粘贴在jsfiddle:

适用于Chrome - Safari和Opera.
http://jsfiddle.net/DennisBetman/RLb6E/

CSS

    body{
    margin:0px;
    background: url(../img/background.png);
}

*:focus {
    outline: 0;
}

.menu-default{
    width: 220px;
    height: 100%;
    position:fixed;
    background-color: white;
    top:0;
    bottom:0;
    left:0;
    border-right:1px solid #d0d0d0;
}

.menu-default .top{
    width:221px;
    height: 152px;
    background-color: #313131;
    margin-bottom:1px;
    !margin-bottom:4px; /* IE7 */
}

.menu-default ul{
    list-style-type: none;
    padding:0px;
    margin: 0px;
    !margin-left:0px; /* IE7 */
}

.menu-default ul li {
    position: relative;
    width:100%;
    background-color:white;
    border-top:1px solid #dadada;
    border-bottom:1px …

我正在制作Img悬停的乐趣.但是现在我的div中有一些文字.我用过代码:

display: table-cell;
vertical-align: middle;

让文本以我的div为中心.我也有这个代码:

.vertical-smallborder{
    position: relative;
    width: 217px;
    height: 350px;
    border: 5px solid white;
    outline: 1px solid #c8c8c8;
    float:left;
    display: table;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    overflow: hidden;
}

我display: table在那边找到了文字.如果我删除它,文本将不会在div中居中.

现在我遇到溢出问题:隐藏.在FireFox和IE溢出中:如果存在,则隐藏不再起作用display: table.

谷歌Chrome和Safari都支持display: table和Overflow:hidden一起使用.

注意:它必须是纯CSS.所以我不能使用任何JavaScript.

谢谢