如果您使用的是 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")并试一试?
我可以在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) 我尝试在其中一个演示中实现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) 虽然我对响应式设计的想法并不陌生,但我遇到了一件非常麻烦的事情......
我已经决定完全转移到rem单位,但我仍然遵循62.5%规则(我用过它em).
所以对于初学者:
html {
font-size: 62.5%;
}
Run Code Online (Sandbox Code Playgroud)
我假设1rem = 10px(我知道它并不总是正确的,但是,嘿,这对我来说有点简化数学,对于浏览器它仍然相对正确吗?)
恐怖的开始歌剧院(12.12 Linux和win版,其中默认字体大小设置为14px和16px分别).
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) 在一个简单的SVG元素里面我有一个图像.
码:
<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>
有一个功能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)我正在使用netadictos在此处发布的代码.我想要做的就是当用户离开或关闭窗口/标签时显示警告.
netadictos发布的代码似乎在IE7,FF 3.0.5,Safari 3.2.1和Chrome中运行良好,但它在Opera v9.63中不起作用.有没有人知道在Opera中做同样事情的方式?
Thx,Trev
我在我正在开发的页面中使用自定义字体,Droid Sans,并且在某些字体大小,底部被切断,但仅限于Opera和webkit浏览器.
它很容易在Google自己的网页上重现,寻找Droid Sans并以18px显示整个字母:http://www.google.com/webfonts
小写特别清楚g.
是否有一些css技巧/黑客我可以用来增加行高/显示整个字符或我真的只限于某些字体大小?
line-height而padding例如不改变任何东西,20px的font-size正常工作,并在目前我使用的是Windows 7.
编辑:顺便说一句,我知道这里有一个类似的问题,但由于接受的答案是改变字体大小而其余答案不适用,所以对我来说没什么用处.
编辑2: 至少现在显示问题的示例(左下栏,幻灯片下,Il Cerca Viaggi).
编辑3:问题似乎仅限于Windows,虽然我不确定哪个版本.
编辑4:我添加了一个来自Google Webfonts的屏幕截图,以显示该问题并非针对我正在开发的网站.

在使用Devise进行身份验证后,我发现存在一个安全漏洞,在用户注销后,会话变量被保留.这允许任何人按下后退按钮并访问登录用户的上一屏幕.
我将这些行添加到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中,不安全的行为仍然存在.此代码没有效果.
对于如何解决这个问题,有任何的建议吗?
谢谢
如何在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角落......