首页 > 代码库 > 控制Web对象显示不同实现方法

控制Web对象显示不同实现方法

2024-07-16 23:23:49   220人阅读

    实现HTML页面中对象的隐藏有两种实现方法：其一是通过style对象的display属性；另外一个是通过visibility属性。二者却存在着微秒的差异，visibility属性规定了元素是否可见，即使不可见的元素也会占据页面的空间，恰好相反，display属性设置的不可见元素则不会占据页面的空间。

（原始图）

（设置visibility属性）

（设置display属性）

    从上面可以清楚看出，两者属性之间的布局差异，但是在设置display属性之后，出现了页面显示错位（IE下正常，Chrome与FF下显示错位）的情况，到底是什么原因造成的呢，经过一番查找，原来跟display所设置的值有关，先来看看display可能的值有哪些：


     在测试代码中，我们设置的display的值设置成block，这样导致不同的浏览器出现了不同的显示结果，根据捕捉分析，IE中设置block与table-row之后的显示结果一样，但是Chrome与FF则出现很大的差异，以Chrome为例，根据下图，对于tr，chrome则给了它一个内部样式值，即table-row，设置成block，出现了显示错误，因此我们只需要保持默认值即可，那就是只需要删除display属性，保证它们均处于默认值之下，就不会出现浏览器的不兼容问题了。


【测试代码】

<html>
   <head>
      <meta HTTP-EQUIV='Pragma' CONTENT='no-cache'>
            <script language="javascript" src=http://www.mamicode.com/"util.js"></script>>


联系
我们