位置：首页>> 网络编程>> 网页设计>> 在opera里css出现渲染问题

在opera里css出现渲染问题

作者：Rank　来源：never-online　发布时间：2009-01-15 12:19:00　

标签：opera,渲染,浏览器,css,问题

先把我的browser信息说明一下：
这是在opera里about中显示的“浏览器识别”
Opera/9.62 (Windows NT 5.1; U; zh-cn) Presto/2.1.1

描述一下bug。

用relative+absolute时出现一些渲染不正常的情况。（这个是普遍情况，也就是说容器在opera浏览器中任何位置多多少少都有类似问题）

还有一个特殊情况，如果你的容器靠近边界，例如我下面的示例在浏览器右侧，则会出现很奇怪的横向滚动条。把滚动条拖过容器的可视范围，再移动下拉框中，滚动条又不见了-_-!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>asp之家 www.aspxhome.com</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="ImageToolbar" content="no"> <meta http-equiv="Creator.name" content="Rank, BlueDestiny, never-online"> <style type="text/css" title="default" media="screen"> /*<![CDATA[*/ body {font:85％/2 arial;} #navigator {width:33em;position:absolute;right:6em;top:5em;} #navigator .menu {float:right;} .more {position:relative;cursor:hand;cursor:pointer;z-index:5;} .more span {position:absolute;top:-.5em;left:-.1em;width:7em;display:block;background:#fff;border:1px solid #09c;} .more span a {display:block;} #link { margin-top:5em;display:block; } /*]]>*/ </style> </head> <body> <h1>opera render problem</h1> <p>在opera里看左边How more的下拉菜单</p> <ol> <li>出现滚动条</li> <li>渲染边框时出现问题</li> </ol> <div id="navigator"> <div class="menu"> <span class="more" onmouseover="var o=this.getElementsByTagName('span')[0];o.style.display='block';" onmouseout="var o=this.getElementsByTagName('span')[0];o.style.display='none';">How more>> <span style="display: none;"> <a href="#">How more<<</a> <a href="#">Javascript</a> <a href="#">Compatibility</a> <a href="#">Accessbility</a> </span> </span> </div> </div> <div id="link">© <a href="http://www.never-online.net/blog">never-online</a></div> </body></html>

解决方案，

1. 用relative替代成absolute，
不用relative+absolute的方案。

投稿

在opera里css出现渲染问题

猜你喜欢