2

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

是否有任何CSS属性或其他东西？

示例：http: //jsfiddle.net/9chk5/

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

2 回答 2

6

您可以使用类来实现您想要的。嗅出用户的浏览器和操作系统，并为您的特定情况添加一个类。例如macFirefox，如果用户在 Mac 上使用 Firefox，则将类应用于 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;  */
}

应该做的伎俩。

更新了你的小提琴

于 2013-02-04T09:29:52.920 回答
2

您可以进入未记录的特征查询的灰色区域。这样你就可以只针对 Mac 上的 Firefox：

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

如果您想针对所有 Firefox，除了 Mac 上的，请执行以下操作：

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

我故意不使用，因为根据Firefox 错误 #1035091@-moz-document，它已被禁用供公众使用。

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

于 2018-04-01T05:16:38.803 回答