标签: opera

Opera 中的 JQuery.Validate 失败

如果您使用的是 Opera 9.5x,您可能会注意到Stack Overflow 上禁用了我们的客户端JQuery.Validate代码。

function initValidation() {
    if (navigator.userAgent.indexOf("Opera") != -1) return;
    $("#post-text").rules("add", { required: true, minlength: 5 });
}
Run Code Online (Sandbox Code Playgroud)

那是因为它在 Opera 中产生了一个异常!当然,它适用于我们尝试过的所有其他浏览器。我开始认真,非常讨厌歌剧。

这有点令人失望,因为如果没有适当的客户端验证,我们的一些请求将失败。当数据不完整时,我们没有时间在服务器端进行完整的消息传递,因此如果您忘记填写表单上的所有字段,您可能会在 Opera 上看到比其他浏览器更多的 YSOD

任何 Opera-ites 都想取消注释这些行(它们位于像这样的核心问答页面上——只需查看源代码并搜索"Opera")并试一试?

validation jquery opera

13
推荐指数
1
解决办法
1619
查看次数

如何在Opera中创建CSS3渐变?

我可以在IE6/7/8/9/FF3.6 +和Chrome中创建CSS渐变(见下文).

我的问题是:

如何在Opera中创建渐变?

.gradient{
        /*Mozilla Firefox 3.6*/
        background-image: -moz-linear-gradient(top, #dcdcdc, #c6c6c6);

        /*Webkit aka Google Chrome*/
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c6c6c6),color-stop(1, #dcdcdc));

        /*Internet Explorer 6,7 and 8*/
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6');

        /*Internet Explorer 8 only*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6')";

        /* Opera */
        /* ??? */
}
Run Code Online (Sandbox Code Playgroud)

css opera gradient css3

13
推荐指数
6
解决办法
2万
查看次数

Jquerymobile的Tap-hold在Opera移动小部件模拟器中不起作用

我尝试在其中一个演示中实现jquerymobile的Tap-hold功能

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile Events</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript">

$( function() {

  $('body').bind( 'taphold', function( e ) {
    alert( 'You tapped and held!' );
    e.stopImmediatePropagation();
    return false;
  } );  

  $('body').bind( 'swipe', function( e ) {
    alert( 'You swiped!' );
    e.stopImmediatePropagation();
    return false;
  } );  

} );

</script>  

</head>

<body> 

<div data-role="page" id="home">

  <div data-role="header">
    <h1>jQuery Mobile Events</h1>
  </div>

  <div data-role="content"> 
    <p>Try:</p>
    <ul>
      <li>Tapping and holding</li>
      <li>Swiping</li>
    </ul>
  </div>

</div>

</body>
</html> …
Run Code Online (Sandbox Code Playgroud)

iphone opera android widget jquery-mobile

13
推荐指数
1
解决办法
1989
查看次数

Opera12和IE9中的rem单位不准确

虽然我对响应式设计的想法并不陌生,但我遇到了一件非常麻烦的事情......

我已经决定完全转移到rem单位,但我仍然遵循62.5%规则(我用过它em).

所以对于初学者:

html {
   font-size: 62.5%; 
}
Run Code Online (Sandbox Code Playgroud)

我假设1rem = 10px(我知道它并不总是正确的,但是,嘿,这对我来说有点简化数学,对于浏览器它仍然相对正确吗?)

恐怖的开始歌剧院(12.12 Linux和win版,其中默认字体大小设置为14px16px分别).

header nav ul li a span {
    padding: 1.8rem 2.7rem 3rem 0;

    font-family: 'sawasdeebold', sans-serif;
    font-size: 2rem;
    line-height: 3rem;

    letter-spacing: -0.3rem;
    display: block;
}
Run Code Online (Sandbox Code Playgroud)

正如你可以看到我导航的一部分是因为使用rem单位让我们说"像素完美" .在linux下页面有点窄(没有问题,字体较小,因此1rem代表较少的像素).然而,nav如果将默认大小更改为除了以外的其他内容,那么所有内容都会严重缩放14px...在Windows下,同样适用于16px......整个扩展的想法都不起作用.我不需要每个像素匹配,但它看起来很难看......

导航在雷姆斯

类似的问题出现在IE9下,但这次是标识,其中:

header h1 a {
    margin: 1.8rem 0 0 1.6rem;
    width: 46.2rem;
    height: 10.1rem; …
Run Code Online (Sandbox Code Playgroud)

html5 opera internet-explorer css3 responsive-design

13
推荐指数
1
解决办法
1804
查看次数

在Firefox中不显示Svg图像

在一个简单的SVG元素里面我有一个图像.

  • Chrome:版本28. - 完美无缺
  • Firefox:22.0 - 没有绘制图像
  • 歌剧:12.16 - 图像显示比正常大4倍

码:

    <svg width="500px" height="500px" viewBox="0 0 70 70">
         <image x="0" y="0" width="10" height="10" 
               id="knight" xlink:href="/images/knight.svg" />
    </svg>

html firefox opera svg image

13
推荐指数
1
解决办法
2万
查看次数

为什么我的代码在Safari或Opera中不起作用?

有一个功能js可以向表中显示消息(消息存储在其中json).在谷歌浏览器中,它可以运行,但Safari,Opera或Microsoft Edge - 不!代码中存在与调用相关的错误setTimeout (callback, 5000)(没有任何内容发送到回调).因此,For (var i = 0; i <respond.length; i ++)将无法正常工作respond === undefined.

但为什么会这样呢?

callback(
  [{
      "time": "1500303264",
      "user": "qwe",
      "message": "we",
      "id": 1
    },
    {
      "time": "1500303987",
      "user": "Max",
      "message": "q",
      "id": 2
    }
  ]);

function smile(mess) {
  var smile = ":)";
  var graficSmile = "<img src = './image/Smile.png' alt='Smile' align='middle'>";
  var string_with_replaced_smile = mess.replace(smile, graficSmile);

  var sad = ":("
  var graficSad = "<img src = …
Run Code Online (Sandbox Code Playgroud)

javascript safari jquery opera google-chrome

13
推荐指数
2
解决办法
739
查看次数

Opera中的onbeforeunload

我正在使用netadictos在此处发布的代码.我想要做的就是当用户离开或关闭窗口/标签时显示警告.

netadictos发布的代码似乎在IE7,FF 3.0.5,Safari 3.2.1和Chrome中运行良好,但它在Opera v9.63中不起作用.有没有人知道在Opera中做同样事情的方式?

Thx,Trev

javascript events opera onbeforeunload

12
推荐指数
2
解决办法
1万
查看次数

在Opera和webkit中切断了自定义字体的底部

我在我正在开发的页面中使用自定义字体,Droid Sans,并且在某些字体大小,底部被切断,但仅限于Opera和webkit浏览器.

它很容易在Google自己的网页上重现,寻找Droid Sans并以18px显示整个字母:http://www.google.com/webfonts

小写特别清楚g.

是否有一些css技巧/黑客我可以用来增加行高/显示整个字符或我真的只限于某些字体大小?

line-heightpadding例如不改变任何东西,20px的font-size正常工作,并在目前我使用的是Windows 7.

编辑:顺便说一句,我知道这里有一个类似的问题,但由于接受的答案是改变字体大小而其余答案不适用,所以对我来说没什么用处.

编辑2: 至少现在显示问题的示例(左下栏,幻灯片下,Il Cerca Viaggi).

编辑3:问题似乎仅限于Windows,虽然我不确定哪个版本.

编辑4:我添加了一个来自Google Webfonts的屏幕截图,以显示该问题并非针对我正在开发的网站.

Chrome 16,Google Webfonts

css opera webkit windows-7 custom-font

12
推荐指数
3
解决办法
1万
查看次数

Rails(set_no_cache方法)无法在Safari和Opera中禁用浏览器缓存

在使用Devise进行身份验证后,我发现存在一个安全漏洞,在用户注销后,会话变量被保留.这允许任何人按下后退按钮并访问登录用户的上一屏幕.

我看了这些帖子 Num 1 Num 2 Num 3

我将这些行添加到application_controller中

before_filter :set_no_cache
def set_no_cache
response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
response.headers["Pragma"] = "no-cache"
response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"
end
Run Code Online (Sandbox Code Playgroud)

在_form.html.erb中,我在顶部添加了这个

<%if user_signed_in? %>
<%=link_to "Sign Out",  destroy_user_session_path, :method => :delete %><br/>
<%= form_for(@listing) do |f| %>
<% if @listing.errors.any? %>
...........
Run Code Online (Sandbox Code Playgroud)

然后我在Firefox,Chrome和Safari上测试了该应用程序.

Firefox和Chrome很好,因为我退出并点击了后退按钮,无法看到用户的上一个屏幕,但是,在Safari和Opera中,不安全的行为仍然存在.此代码没有效果.

对于如何解决这个问题,有任何的建议吗?

谢谢

ruby safari opera ruby-on-rails browser-cache

12
推荐指数
1
解决办法
7154
查看次数

如何设置background-position-x?

如何在Opera上设置background-position-x?

div#logocontainer{
    width: auto;
    height: auto;
    text-align: center;
    line-height: 200px;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../img/WatermarkMP.png);
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    padding: 10px;
}
Run Code Online (Sandbox Code Playgroud)

我有以下CSS规则,它将在Chrome和Safari,桌面版和移动版上正确显示.但它不适用于Opera,它似乎不支持background-position-x:50%; background-position-y:50%; 规则.我是否必须编写脚本以使其与Opera兼容?我如何解决这个问题呢?

它似乎也没有围绕jQuery Mobile角落......

css opera css3

12
推荐指数
1
解决办法
2万
查看次数