Question

我的编码中存在一些对齐问题。在Windows中，所有浏览器似乎都没问题。但是当我在Mac firefox中检查它时，对齐并不完美。我可以通过改变一点来修复它。但它应该只适用于Mac上的Firefox。

是否有任何CSS属性或其他内容？

.notes {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
margin: 0 auto;
background: #abc;
}

.search-notes {
font-size: 14px;
color: #484848;
position: relative;
top: -20px;
margin: 0 25px 0 22px;
}

和HTML

<div class="notes" style="top:2px"></div><div class="search-notes">This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. </div>
    </div>

Answer 1

您可以使用类来实现您想要的效果。嗅出用户的浏览器和操作系统，并为您的特定情况添加一个类到正文。例如。如果用户在Mac上使用Firefox，则将macFirefox类应用于body，然后在CSS中使用.macFirefox .yourClass { /*CSS rules*/ }。

然而，以交叉浏览器的方式应用样式会更好。

例如，在您的特定情况下，将样式更改为


.search-notes {
    font-size: 14px;
    color: #484848;
    position:absolute;
    display:inline;
/*  position: relative;
    top: -20px;
    margin: 0 25px 0 22px;  */
}

应该这样做。

<强> Updated your fiddle

Answer 2

您可以进入未记录的要素查询的灰色区域。这样，您只能在Mac上定位Firefox：

class map2d(list):
    def __init__(self,x,y):
        self = [[None for _ in range(y)] for _ in range(x)]

如果您想要定位除Mac上的所有Firefox，请执行以下操作：

@supports (-moz-osx-font-smoothing: auto) {
  #firefox-on-mac { display: block; }
}

我故意不使用@supports (-moz-appearance: none) and (not (-moz-osx-font-smoothing: auto)) { #firefox-not-on-mac { display: block; } }，因为它已被Firefox bug #1035091禁用以供公众使用。

有关实际示例，请参阅this codepen。

目标CSS仅适用于Mac上的Firefox

2 个答案: