文章/答案/技术大牛

发布

社区首页 >问答首页 >如何迫使现代Internet Explorer在真实网站中显示适当的渐变背景

问如何迫使现代Internet Explorer在真实网站中显示适当的渐变背景
EN

Stack Overflow用户

提问于 2014-10-08 09:28:55

回答 2查看 172关注 0票数 0

主体背景在内联css中定义为

body {
  background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
  }

在真实的网站中，最新的Internet在后台显示水平线。

在IE开发工具中，我关闭了所有其他样式，尝试了2色渐变、线性渐变和其他颜色，但问题依然存在。

如何迫使IE显示没有水平线的背景？

铬显示适当的背景。此外，如果只使用此样式，则Internet将显示适当的背景。页面

<html>
<head>
<style type="text/css">
body {
  background: radial-gradient( #EAC39F, #CB690C);
  }
</style>
</head><html><body></body></html>

是正确显示的。如果页面中有更多的元素，则会出现水平线。如何删除中的这些行？页面中使用jquery和jquery。

internet-explorer

radial-gradients

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-08 10:00:00

由于IE不将高度应用于主体，所以可以将固定的height应用于body，也可以将100% height应用于CSS中的html标记，

如果你不需要背景来重复，应用，background-repeat:no-repeat。

此外，如果您正在寻找跨浏览器的支持，那么您应该使用供应商浏览器。

下面是一个在IE10+中工作的代码片段：

html {
  height: 100%
}
body {
  background: rgba(234, 195, 159, 1);
  /* Old Browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(234, 195, 159, 1)), color-stop(100%, rgba(203, 104, 12, 1)));
  /* Chrome, Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* IE 10+ */
  background: radial-gradient(ellipse at center, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eac39f', endColorstr='#cb680c', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  background-repeat: no-repeat
}

票数 1

Stack Overflow用户

发布于 2014-10-08 09:48:09

这个问题似乎源于IE没有将高度应用于身体元素这一事实。这样，背景就会被重复，你就会看到这些线条。

通过应用

body {
  background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}

在Chrome、IE等http://jsfiddle.net/xpz2tgp9/上也可以看到类似的效果。

若要解决问题，请将特定高度应用于body元素，或添加一个清除div，该div将强制身体具有高度值。

html,body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

见- http://jsfiddle.net/xpz2tgp9/1/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26253529

复制

相似问题

问如何迫使现代Internet Explorer在真实网站中显示适当的渐变背景
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何迫使现代Internet Explorer在真实网站中显示适当的渐变背景EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何迫使现代Internet Explorer在真实网站中显示适当的渐变背景
EN