-webkit- column -count 3，仅视频在第一列工作，无视频在第d和第三列

Question

嗨，我使用的是html5视频标签。我正在使用-webkit来使用pinterest类型的布局。我在放映视频时遇到了问题。视频只显示在第一列，没有视频显示在第二列和第三列。但我可以听到音频，它确认视频工作正常，但有东西阻塞。我尝试移除webkit，并尝试更改布局，但所有视频都工作正常。

这是我的css。

<style type="text/css">
    #wrapper1 {
        width: 90%;
        max-width: 1100px;
        min-width: 800px;
        margin: 50px auto;
    }

    .pin1 {
        display: inline-block;
        background: #FEFEFE;
        border: 2px solid #FAFAFA;
        box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
        margin: 0 2px 15px;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        column-break-inside: avoid;
        padding: 15px;
        padding-bottom: 5px;
        background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
        opacity: 1;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
        z-index: 10;
    }

        .pin1:hover {
            background-color: #F3F5D5;
        }

    #columns1 {
        -webkit-column-count: 3;
        -webkit-column-gap: 10px;
        -webkit-column-fill: auto;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        -moz-column-count: 3;
        -moz-column-gap: 10px;
        -moz-column-fill: auto;
        column-count: 3;
        column-gap: 15px;
        column-fill: auto;
        z-index: 10;
    }
</style>


  <div id="wrapper1">
        <div id="column1">
            <div class="pin1">
                <video id="Video1" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video2" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="540" style="z-index: 2; vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video3" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="340" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video4" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video5" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video6" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>
        </div>
    </div>``

有没有人能帮帮我。

Answer 1

当我有一个webkit-column-count时，我也遇到了同样的链接不起作用的问题，特别是在Chrome中。原来把webkit-backface-visibility设置为隐藏会导致我的链接不起作用。一旦我把它从我的CSS中去掉，它们就又开始工作了。你可以试一试，看看它是否能修好它。