Question

无法让此列布局在Safari中运行。

令人惊讶的是它适用于IE11＆amp;边缘。

有没有人取得类似的成就？

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 */
}

＆＃13;

	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;
	}

＆＃13;

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

＆＃13;

Answer 2

使用负边距而不是#include "..Impl.h" #include "..Famous.h" void main(){ IFoo* foo = new FooImpl(2); ... }定位来解决它。

我还在absolute内将<dl>替换为<ul>。

更新小提琴： here

Safari bug中的CSS列定义列表

2 个答案: