ie10无法显示html,背景html转换在Firefox / IE10中不起作用(Background html transition doesnt work in Firefox/IE10)...

背景html转换在Firefox / IE10中不起作用(Background html transition doesnt work in Firefox/IE10)

我想要一些帮助，以确定是否有任何解决方案：

我在html元素中进行了背景转换。 此过渡仅适用于最新的Chrome，Safari和Opera。 它不在IE10和FFx中。 似乎是因为bkg在html元素中，我是对的吗？ 我尝试了完整的sintax符号，没有速记，没关系。 有没有人可以确认原因，并且有人知道我是否可以做一些不同的事情以便在IE10和FFx中工作？ 韩国社交协会！

(bkg随着js函数的变化而不断变化)

html {

background:#000000;

background: url(img/bkg_banana.jpg) no-repeat fixed right;

-webkit-background-size: cover;

background-size: cover;

-webkit-transition: background 0.5s ease;

transition: background 0.5s ease;

}

I´d like some help to be sure if there isn´t any solution about this:

I made a background transition which in the html element. The transition works only in the latest Chrome, Safari and Opera. It doesn´t in IE10 and FFx. Seems it´s because the bkg is in the html element, am I right? I tried the full sintax notation, no shorthand, it doesn´t matter. Does anyone can confirm the reason, and does anyone know if I could do something different in order to work in IE10 and FFx? Tks!!

(The bkg keeps changing with a js function changeimage)

html {

background:#000000;

background: url(img/bkg_banana.jpg) no-repeat fixed right;

-webkit-background-size: cover;

background-size: cover;

-webkit-transition: background 0.5s ease;

transition: background 0.5s ease;

}

原文：https://stackoverflow.com/questions/17539680

更新时间：2020-07-10 06:07

最满意答案

要使这些样式同时影响Firefox和IE，您需要添加-moz-(对于Firefox)和-ms-(对于Internet Explorer)。 例如，

html {

-moz-background-size:cover;

-ms-background-size:cover;

-webkit-background-size:cover;

background-size:cover;

}

等等...

To get those styles to affect both Firefox and IE, you'll need to add -moz- (for Firefox) and -ms- (for Internet Explorer). For example,

html {

-moz-background-size:cover;

-ms-background-size:cover;

-webkit-background-size:cover;

background-size:cover;

}

etc...

相关问答

我没有安装IE10，所以我无法检查myseld。 但这是一个文件格式测试页面，用于测试支持哪些格式： http://textopia.org/androidsoundformats.html I don't have an IE10 installed, so i can't check myseld. But here is a file format test page to test which formats are supported: http://textopia.org/andro

...

尝试在iframe文档的readyState complete时打印它，因为open.write在IE下是异步的。 此外， ifrm.style.display = "none"阻止打印帧，因此整个窗口都会打印出来。 以下代码已通过IE10验证。 它可能无法与其他浏览器一起使用。

main

...

更加详细一些 a .ch-item {

opacity:0.7;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

}

a:

...

由于您已经在使用JQuery，因此我建议您在JQuery onload而不是Window onload中调用您的函数。 $(function() {

var tenMinutes = 60 * 10,display = document.querySelector('#time');

startTimer(tenMinutes, display);

}

Since you are already using JQuery, I recommend you to call your f

...

据我所知，没有稳定版本的Internet Explorer支持仪表元素。 甚至Modernizr测试套件也未能在Windows 8.1上检测IE10 / IE11中的仪表。 这可能只留下你的后备方法。 http://connect.microsoft.com/IE/feedback/details/793736/ie11-feature-request-support-for-meter To my knowledge, no stable version of Internet Explorer

...

感谢Crush和DownMaster，我以不同的方式看待问题。 通过阻止缓存AJAX页面似乎使其工作，添加$.ajaxSetup({cache: false}); 阻止缓存。 $(function() {

getStatus();

});

function getStatus() {

$.ajaxSetup({ cache: false });//prevents the AJAX cache.

$('div#status').load('thankyou.php')

setTimeout("ge

...

要使这些样式同时影响Firefox和IE，您需要添加-moz-(对于Firefox)和-ms-(对于Internet Explorer)。 例如， html {

-moz-background-size:cover;

-ms-background-size:cover;

-webkit-background-size:cover;

background-size:cover;

}

等等... To get those styles to affect both Firefox and IE, y

...

尝试为h3添加空悬停选择器。 h3：悬停{} Try adding empty hover selector for h3. h3:hover {}

它看起来像IE中的一个错误(参见类似的SO问题 )。 为了解决这个问题，我只是将初始和最终偏移更改为0.1px而不是0.这似乎已经解决了问题。 解决方案代码( jsfiddle )： @keyframes snapVertical {

0% { background-position: 0 0.1px; }

16% { background-position: 0 0.1px; }

21% { background-position: 0 -136px; }

37% { backg

...

我找到的唯一完整的跨浏览器dataURI标头是data:image/svg+xml; charset=utf8, data:image/svg+xml; charset=utf8, . 此外，您可能需要encodeURI您的svg标记： .foo {

display:inline-block;

width:32px;

height:32px;

border: 1px solid gray;

background-image: url('data:i

...