我创建了一个使用body:before标签来“拆分”设计的网页设计,类似于WordPress的TwentyFifteen主题( https://wordpress.org/themes/twentyfifteen/

但我在“左”列中不使用颜色,而是在图像中使用颜色。 该代码适用于所有浏览器(Chrome,FF,Safari),但不适用于IE(9-11版)。

CSS看起来像:

body::before {
    background: url("img/back-left.jpg") no-repeat center top ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    content: "";
    display: block;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    z-index: 1;
}

效果:使用IE打开页面时,背景图片未显示。 当我去一个子站点时,图片正在显示。 当我转换浏览器窗口时,显示的是图片。 当我在IE Dev工具栏中更改任何内容(无论如何)时,图片已显示。

如果我使用background-color而不是background(或background-image),那么它在IE上可以正常工作。

有任何想法吗? 我认为这听起来像是渲染的东西。 背景图片渲染得太迟了,因此没有显示(相反,我在页面上进行了所有交互)。 但是如何解决呢?

#1楼 票数:0

我找到了一个“解决方案”,但遇到了另一个问题。 ;-)

当我设定

html, body { overflow: auto; }

然后,背景图像在IE 10和IE 11中正确显示。但是现在我遇到了IE 11平滑滚动的问题(使用鼠标滚轮时背景图像到处都有跳跃。使用滚动条时,它可以正常工作) 。 无论如何,这个变体对我来说比不显示背景图像更好。 因此,我仍然希望MS可以解决平滑滚动的错误。

我用此更正在CodePen中创建了一个分叉: http ://codepen.io/anon/pen/rabMMm

(这是原始的CodePen代码: http ://codepen.io/anon/pen/qEwEVy)

还是没有人知道从IE修复平滑滚动问题的解决方案?

  ask by IFY translate from so

未解决问题?本站智能推荐:

8回复

IE特定的CSS无法呈现

有人可以帮我为什么IE特定CSS无法在IE上运行吗? 这是实时网站的链接: http : //www.themebia.com/pretavivre/ 我正在尝试修复IE中的顶级导航栏。 导航栏在Chrome和FF中看起来不错,但在IE中看起来不太好。 我在html头中为IE添加了
1回复

IE无法显示部分Wordpress网站

http://belbelila.com上的网站是一个简单的wordpress博客。 该网站在FireFox上显示正常,但在IE 8或9中,它在第一篇文章发布后就被删除了,我不知道为什么。 这是区别的屏幕截图: Firefox: IE8: 谁能给我一个提示-是什么原因造成的?
1回复

我的wordpress网站无法在MSEdge/IE上运行。

最近,我一直在为我的客户创建一个网站。 我想说明一下,我不是专业的Web开发人员,而是具有一些基本编码技能的设计师。 我之前已经创建了一些类似的wordpress页面,但是从未遇到过这个问题。 即使我在所有网站上都使用相同的主题(“选择主题的Stockhoml”)。 地址是: http
6回复

为什么我的CSS无法在IE9中正确显示?

几个小时前,我对自己的WordPress主页做了一个小改动,现在IE9中出现了一些以前没有的随机怪异CSS问题。 我已经使用IE的开发人员工具来尝试找出问题所在,但是与firebug相比,该工具确实很烂,而且问题仅在IE中存在。 另外,不幸的是,它托管在Intranet上,因此防火墙之外的
1回复

边栏使用WP推送到IE上的页面底部[关闭]

我在IE中遇到这种情况,其中边栏在使用IE时会推到页面底部。 如果我在IE中单击“兼容性视图”按钮,则它可以修复,但是我似乎找不到解决问题的方法。 可以在此处看到示例: http : //www.gardensupplyinc.com/wordpress/products/shepherd
1回复

CSS不适用于IE和Firefox,但可在Chrome中使用

网站jgimprinters.com可以在Chrome浏览器中加载并正常运行,但不能在IE或Firefox中运行。 我已经验证IE下载了样式表,但是它并没有应用很多样式。 例如,在IE中,原本应该以全尺寸隐藏的菜单按钮正在显示,并且全部弹出(太大),菜单样式均不起作用,几件事的背景色不起作用
3回复

IE结构问题

我刚刚通过wordpress做了一个非常简单的静态说明。 但是,我使用html和CSS从头开始制作主题。 它看起来完美,正是我想要的FFox,Chrome,Safari等...但是在IE 6,7,8中检查是不正确的。 单击{ here }以查看该站点,如果您没有IE,则为该站点的屏幕快照
1回复

奇怪的IE错误-WordPress主题

我遇到了一个奇怪的IE错误,无法弄清为什么会不高兴。 我正在IE 11中对其进行测试。 问题是我页面的某一部分不会显示在IE上,但在Firefox和Chrome上却显示正常。 编写代码是为了使该部分具有桌面和移动/平板电脑版本,并且它们在Chrome和Firefox中可以100%正常运行