`
allan9958
  • 浏览: 79617 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ie ff 之resize

阅读更多
更新FF后,发现之前项目里的样式有比较大的问题,其实也算不上是更新后的问题,之前也存在只是现在更为明显些。后想想算了,找时间重构吧。

问题是这样,IE和FF里使用锁头的TABLE,代码不能很好的统一,CSS和JS都这样。后来网上找了资料,对问题进行了改进。

使用css固定表头,并结合JS让表格自适应高度

简单的表格,含thead和tbody
<div class="wzjGridTable">
<table cellpadding="0" cellspacing="0" border="0" id="tabClient">
   <thead class="gridHeader">
      <tr> 			
         <td>标题</td>
     </tr>
   </thead>
   <tbody class="gridContent">
     <tr>	  
        <td>内容</td>
     </tr>
   </tbody>
</table>
</div>


/*CSS*/
div.wzjGridTable{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
_overflow-y:auto;
}
div.wzjGridTable table{
width:100%;
overflow:auto;
background:#FFFFFF;
}
div.wzjGridTable thead.gridHeader tr{
position: relative;
TOP: expression(this.offsetParent.scrollTop-1);
}


//js
if(navigator.appName.indexOf("Microsoft")!=-1){
setTableHeight_IE()
(window).bind("resize",function(){
setTableHeight_IE()
});		
}else{
setTableHeight_FF()
window.onresize = setTableHeight_FF
}

function setTableHeight_FF(){
	var titleHead=getHeight($(".toolbarDiv").css("height"))
	var tool=getHeight($(".winTitle").css("height"))
	var tabHead=getHeight($(".gridHeader").css("height"))
	var finalH=document.body.clientHeight-titleHead-tool-tabHead;
	$("#tabClient").css("height",finalH)
}
	
function setTableHeight_IE(){
	var tabHead=getHeight($(".gridHeader tr td").css("height"))
	var finalH=document.body.clientHeight-tabHead-tabHead;
	$("div.wzjGridTable").css("height",finalH)
}
分享到:
评论

相关推荐

    【速查手册】IE与FF下JS的区别

    - `window.resizeTo()`和`window.resizeBy()`:这两个方法在调整浏览器窗口大小时,IE和FF的处理方式有差异。 4. 事件处理: - `event`对象:在IE中,事件对象作为全局对象,而在FF中,事件对象作为函数参数传递...

    IE与FF兼容在JS方面要注意的一些问题

    10. **BOM(浏览器对象模型)**:IE的BOM对象如`window`、`document`的一些属性和方法与其他浏览器有差异,例如`window.innerWidth`、`window.resizeTo`等。 文件名“代码整理的一些规范”可能包含了开发实践中的...

    兼容ie,FF,chrome,opera的弹出层居中js

    标题“兼容ie,FF,chrome,opera的弹出层居中js”所指的就是一个JavaScript实现的弹出层(popup layer)定位代码,它能在Internet Explorer(IE)、Firefox(FF)、Chrome以及Opera这些主流浏览器中实现居中显示。...

    IE之动态添加DOM节点触发window.resize事件

    在标签中提到的“DOM window.resize 事件”是本次讨论的核心内容,即文档对象模型(DOM)在IE特定版本中对window.resize事件的响应情况,这可能与现代浏览器,如FF(Firefox)和Chrome的表现有所不同。 从【部分...

    用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    如果希望查看器适应不同屏幕尺寸,可以使用媒体查询(Media Queries)或监听`resize`事件来调整图片大小和div容器。 8. **性能优化**: 当图片很大时,频繁缩放和平移可能导致性能问题。可以考虑使用CSS3的`...

    jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度 高度自适应,兼容IE,FF,CHROME.zip

    4. **兼容性**:考虑到浏览器的多样性,开发人员需要确保代码在主流浏览器如Internet Explorer(IE)、Firefox(FF)和Chrome上都能正常工作。这可能需要使用jQuery的跨浏览器兼容性特性,以及针对旧版IE可能存在的...

    JavaScript 复制功能代码 兼容多浏览器(ZeroClipboard)

    Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要...

    网页javascript常用代码收藏

    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ff0000', endColorstr='#00ff00'); ``` **知识点解释:** 使用CSS的`filter`属性,结合特定的IE滤镜,可以为页面元素添加各种视觉效果,如...

    jquery弹出层

    jQuery弹出层,通常被称为模态对话框或浮动窗口,是在网页主界面之上显示一个半透明或全透明的遮罩层,以及一个独立的窗口,用于展示详细信息、警告提示、表单输入等。这种设计可以避免用户在处理当前任务时被其他...

    jquery 实现窗口的最大化不论什么情况

    而且,从现代Web开发的角度看,使用VBScript和ActiveX控件并不是推荐的实践,因为这些技术已经过时,而且它们的安全风险较高,更不在其他现代浏览器的支持范围之内。 此外,现代浏览器出于安全和用户体验的考虑,...

    JavaScript 经典代码大全

    &lt;body onload="top.resizeTo(300, 200);"&gt; (300, 200);"&gt; ``` 第一段代码用于调整窗口的大小,第二段代码则用于移动窗口的位置。这对于需要精确控制窗口显示的场景非常有用。 ### 20. 禁用滚动条 ```html ``` ...

    jQuery.nicescroll美化滚动条

    jQuery.nicescroll致力于提供良好的跨浏览器兼容性,支持现代浏览器如Chrome、Firefox、Safari、Edge以及IE8+。不过,需要注意的是,由于滚动条样式是由JavaScript动态生成,所以性能可能会受到一定的影响,尤其是在...

    JavaScript Table行定位效果

    给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来...

    js使用小技巧

    &lt;body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"&gt; 无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert...

    图库新版jQuery焦点图 JS代码

    //document.writeln ('&lt;dd&gt;06月21日 修复IE6下兼容问题&lt;/dd&gt;'); //document.writeln ('&lt;dd&gt;06月01日 懒人图库2012新版上线&lt;/dd&gt;'); //document.writeln ('&lt;dd&gt;05月26日 新增北方网通服务器&lt;/dd&gt;'); //document....

Global site tag (gtag.js) - Google Analytics