在svg中设置div时div div不起作用

Question

这是我的代码，

<div class="content-container-fluid">      
    <div class="row">                
        <div class="cols-sample-area" style="width: 100%;"> 
            <div id="scrollcontent" style="width:92% !important; transform: translate(0, 50%);">                  
                <div id="scrollcontenttemplate_group_" style="position: absolute;">
                    <div id="scrollcontentthumbleft" style="position: absolute; top: 42px; cursor: pointer; z-index: 1; left: 276.34375px;">
                        <div style="width:8px;height:36px;background-color: #41d335;border: 1px solid black;"></div>
                    </div>
                </div>
                <svg id="scrollcontent_svg" style="overflow:visible;position:relative" height="120" width="1188">
                    <g id="scrollcontenthigherLevel" style="cursor: pointer;">
                        <line x1="1" y1="0" x2="1" y2="21" stroke="black" stroke-width="1" stroke-dasharray="1 1 10"></line>
                    </g>
                </svg>
            </div>  
        </div>
    </div>
</div>

行描边短划线数组应用于该div？如何解决这个问题？

为什么这样的边框显示出来..如何解决？

Sample link

Answer 1

SVG的破折号数组实际上并没有影响<div>。这似乎是Chrome中奇怪的渲染/合成异常。

您可以通过更改dasharray值来确认它不是dasharray。 此外，如果你缩放页面（Ctrl- +），“潇洒”就会消失。

我不知道原因是什么，但你可能想要report the bug to Chrome。