在Safari中使用此列布局时遇到问题。
令人惊讶的是,它可以在IE11 & Edge中工作。
有没有人做过类似的事情?
https://jsfiddle.net/gurtfrobe/3xhmxtx5/1/
下面是让SO验证器满意的示例代码片段。
<dt>.</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>A</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>B</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
发布于 2018-03-06 16:47:01
发布于 2018-03-05 19:41:37
对于safari,它需要供应商前缀:-webkit-
。所以你必须像下面这样应用css。
dl {
font-size: 14px;
line-height: 1.6;
columns: 100px 4;
-webkit-columns: 100px 4; /* for safari browsers */
}
dl {
font-size: 14px;
line-height: 1.6;
columns: 100px 4;
-webkit-columns: 100px 4;
}
dt {
font-weight: 700;
left: auto;
position: absolute;
top: auto;
}
dd {
margin-left: 1.5em;
}
<dl>
<dt>.</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>A</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>B</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>C</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>D</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>F</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>G</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>H</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>I</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>J</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>L</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>M</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>N</dt>
<dd><a href="#">Sample link</a></dd>
<dt>O</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>P</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>R</dt>
<dd><a href="#">Sample link</a></dd>
<dt>S</dt>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dd><a href="#">Sample link</a></dd>
<dt>T</dt>
<dd><a href="#">Sample link</a></dd>
</dl>
https://stackoverflow.com/questions/49109445
复制相似问题