2

如果用户/访问者使用歌剧，有什么方法可以覆盖css中的某些内容并使用不同的大小？

例如，在 chrome、ff 和 safari 中，这很有效：

.section#search h3 a {
    background: url("../img/search.png") no-repeat 0 50%;
    padding: 0 0 0 25px;
    position: relative;
}

但是在 Opera 中填充不是很好......我需要添加top: 16px;到它或将填充更改为padding: 0 0 36px 25px;

是否有像 IE 或 javascript 使用这样的“黑客”？没有想法...

我只需要为歌剧添加顶部或新填充。谢谢 ;）

4

4 回答 4

3

您可以使用像Modernizr这样的 JavaScript 库来测试浏览器，并使用它添加的专门针对 Opera 的 css 类。

于 2012-05-15T22:31:44.897 回答
3

使用 conditional-css 工具，您可以定位 opera，但引擎很重要。conditional-css.com 解释说：

Conditional-CSS 并不真正对用户使用的浏览器感兴趣，而是对用户浏览器使用的渲染引擎感兴趣。这就是为什么 Conditional-CSS 使用“Gecko”而不是众所周知的 Firefox 作为其浏览器条件之一的原因。同样对于 Safari 使用“Webkit”。这允许使用相同渲染引擎的其他浏览器接收相同的目标 CSS。此规则的例外情况适用于 IE（而不是使用“Trident”），因为这是 IE 条件注释使用的内容，而 Trident 并不特别为人所知。同样对于 Opera，由于只有 Opera 浏览器使用它的 Presto 渲染引擎，所以使用了 'Opera'。

http://www.conditional-css.com/advanced

他们写道，条件标签的形成如下：

[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]

并且浏览器名称如下：

IE - Internet Explorer
Gecko - Gecko based browsers (Firefox, Camino etc)
Webkit - Webkit based browsers (Safari, Shiira etc)
'SafMob' - Mobile Safari (iPhone / iPod Touch)
Opera - Opera's browser
IEMac - Internet Explorer for the Mac
Konq - Konqueror
IEmob - IE mobile
PSP - Playstation Portable
NetF - Net Front

因此，根据他们的说法，从逻辑上讲，您可以通过以下方式进行定位： [if Opera]

像这样在 CSS 块中：

[if Opera] .box {  
    width: 500px;  
    padding: 100px 0;  
}

或者像这样的 CSS 包括：

<!--[if Opera]>

<![endif]-->
于 2012-05-15T22:34:14.553 回答
1

什么版本和类型的歌剧？你可以使用这个媒体查询

@media not all 和 (-webkit-min-device-pixel-ratio:0) { } 以 10、10.5、11 和 11.6 为目标

在这里查看：注意，我只在 chrome19 和 Opera 11.6 中查看过http://jsfiddle.net/jalbertbowdenii/fw94a/

更好的

x:-o-prefocus, p{}

http://jsfiddle.net/jalbertbowdenii/6pRPC/

于 2012-05-15T22:37:06.037 回答
1

在您计划使用变通方法和技巧之前，请考虑以下事项：

  1. 您的页面是否处于严格模式？如果没有，请在页面的第一行添加一个文档类型：

    <!DOCTYPE html>

    否则，您的页面处于怪异模式，这是跨浏览器不一致的主要原因。

  2. 尝试使用CSS 重置。这应该可以消除浏览器之间的小不一致，如填充、边距、对齐等。在任何其他样式之前加载此样式。

于 2012-05-15T22:38:26.263 回答