Safari bug中的CSS列定义列表

Question

无法使此列布局在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>

Answer 1

对于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>

Answer 2

用负边距而不是absolute定位来解决它。

我还把<dl>换成<ul>里面的<ol>。

更新小提琴：https://jsfiddle.net/gurtfrobe/Lz21cg1o/2/