Safari错误中的CSS列定义列表
Safari错误中的CSS列定义列表
提问于 2018-03-05 19:27:59
在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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-06 16:47:01
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49109445
复制相关文章
相似问题
腾讯云开发者
