当前位置:  开发笔记 > 前端 > 正文

背景颜色和谷歌浏览器问题

如何解决《背景颜色和谷歌浏览器问题》经验,为你挑选了5个好方法。

有时我会在Chrome中破坏背景.我没有得到任何其他浏览器的此错误.

这是负责身体背景颜色的简单CSS线:

body 
{
   background: black;
   color: white;
   font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}

这正是我遇到这个问题的原因.我点击了Gmail电子邮件中包含的链接,但我得到了错误(没有背景信息).然后我刷新页面,背景完全着色.

怎么解决这个问题?



1> Logan Serman..:

从来没有听说过.尝试:

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: ...;
}



2> 小智..:

好的,我找到了解决方案.这不是很好,但没有副作用的伎俩.

HTML:

 

(把它放在身体标签下面)

CSS:

#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }

这有什么办法来解决这个问题:

它迫使Chrome认为页面的内容是100%而不是 - 这会阻止身体"出现"内容的大小并解决丢失的背景错误.这基本上是height: 100%在应用于body或html时执行的操作,但是在滚动(超过100%页面高度)时不会产生背景被切断的副作用,就像在这些元素上使用100%高度一样.

我现在可以睡觉=]


对于纯CSS解决方案,将#chromeFix更改为body:after并向css属性添加内容:"".

3> 小智..:

我有同样的问题上一对夫妇的网站,并通过移动从身体的背景造型为HTML固定它(我猜是的变化body {},以html, body{}技术已经被提及,但显示了您只能做与风格上的HTML)例如

body {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;

}

html {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
}
body {
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;
}

这适用于IE6-8,Chrome 4-5,Safari 4,Opera 10和Firefox 3.x,没有明显令人讨厌的副作用.



4> 小智..:

我能够解决这个问题:

html { height: 100%; }



5> 小智..:

HTML和正文高度100%在旧的IE版本中不起作用.

您必须将backgroundproperties从body元素移动到html元素.
这将修复它的crossbrowser.

推荐阅读
小妖694_807
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有