Question

我在Chrome中遇到了一个奇怪的CSS问题。我做了一支笔作为例子：

.flip {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 90px;
    height: 94px;
    border: 4px solid white;
}
.flip .card {
    width: 100%;
    height: 100%;
    line-height: 86px;
    text-align: center;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

    .flip .card .face {
        width: 100%;
        height: 100%;
        z-index: 2;
        font-size: 1.5em;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .flip .card .back a {
        display: block;
        color: white;
    }

我用内部超链接制作了几个div。我已经将displaymode设置为Block，因此链接应该延伸到整个区域。

没有。它只延伸div的下半部分。在Firefox中它工作正常。只有Chrome似乎有这个问题。找不到任何支持我的问题的错误......

Answer 1

你说Chrome吗？这很简单，如果它不是单向的话，那就试试吧。尝试更改

.flip .card.flipped {
    -webkit-transform: rotatex(-180deg);
    -moz-transform: rotatex(-180deg);
    -ms-transform: rotatex(-180deg);
    -o-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
}

要

.flip .card.flipped {
    -webkit-transform: rotatex(180deg);
    -moz-transform: rotatex(180deg);
    -ms-transform: rotatex(180deg);
    -o-transform: rotatex(180deg);
    transform: rotatex(180deg);
}

HTML Block Anchor元素只能在Chrome中点击一半

1 个答案: