Firefox下table单元格td设计relative定位失效解决方案(转)

问题描述:

默认情况下,table的单元格td的display为table-cell,在IE 给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF下却不可以。 但是在IE下,position:absolute的容器的z-index总是比td的z-index低,td层总是在 position:absolute的容器的上面

发生条件:

1. IE6、IE7、IE8和FF浏览器

2. 使用td默认样式,设置td的position:relateve,再给td内的容器设置position:absolute定位

原因分析:

1. 在FF中position:relative要与display:block/inline-block才能生效,display:block/inline-block可以是默认块元素,或是被定义的元素。

2. 而在IE中position:relative除了与display:block/inline-block可以生效外,与display:table-cell、table等都可以

默认情况下,IE中td的position:relative是有效的;<br />

在FF中td的position:relative是无效的<br />

要在FF中使table的position:relative有效,需要同时设置display:block,而IE不用同时设置display:block

另一个解决法:

不要给td加入定位,将td里面的内容加一个div,然后把div定位即可,我觉得这样还好一些,不会引起兼容问题。

原文地址:百度空间(在手机端好像进不去)

Firefox下table单元格td设计relative定位失效解决方案(转),布布扣,bubuko.com

时间: 2024-07-30 20:28:36

Firefox下table单元格td设计relative定位失效解决方案(转)的相关文章

表格中等宽单元格td之---获取节点下字符串的宽度

当我们给了table一个固定宽度时或者宽度为100%时,如果不给tr和td固定的width.height.table内部的tr和td会根据其自身的内容自动适应宽度和高度,项目中提出了一个需求,想让table中的某些tr(或者td)的宽度根据这些部分的内容,选出最大宽度,在赋值给这几个tr(或者td),从而做到部分tr(或者td)等宽 原图是这样的:产量列下的td长短不一 解决办法: (一)首先我想到了table的 标签自己的属性: table-layout:fixed ; 此属性可以让table

firefox ie 设置单元格宽度 td width 有bug,不能正常工作。以下方式可以解决

1. firefox ie 设置单元格宽度 td width 有bug,不能正常工作.以下方式可以解决 jqElement.css({ 'min-width': srcth1.width() + "px", 'width': srcth1.width() + "px" }); 2.不要使用CellSpacing  CellPadding,要不效果错误.

jquery实现的拖动可以调整table单元格大小代码实例

jquery实现的拖动可以调整table单元格大小代码实例: 本章节介绍一下如果利用jquery实现表格单元格可以通过鼠标拖动调整大小的效果,当然如果让我们完全写代码的话,可能会比较的复杂,不过有现成的插件可以使用,只要简单的几个步骤就可以实现我们的要求. 一.引入相关库文件: 要使用相关插件,那就必须要引入相关的代码文件,如下: <script src="/js/jquery-1.8.0.min.js" type="text/javascript">&

Javascript横向/纵向合并单元格TD

在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1     JOB TOTAL SAL INDEX EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO 1 ANALYST 6000 1 7788 SCOTT ANALYST 7566 4/19/1987 3000.00   20 1 ANALYST 6000 2 7902 FORD ANALYST 7566 12/3/1981

table单元格设置细边框

设置table的CSS为{border-collapse:collapse;border:none;}, 再设置td的CSS为{border:solid #000 1px;}, <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

为每一个table单元格设置不同的背景颜色

为每一个table单元格设置不同的背景颜色: 本章节介绍一下如何给表格的每一个单元格设置一个背景颜色,当然这里的方法比较笨拙,主要面向初学者. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

js合并table单元格实例

这里展示js合并table的单元格,代码亲测可行 后台采用springmvc搭建 Record实体类 public class Record {     public String isp;     public String large_area;     public String province;     public String name;     public String age;       ......   //省略get和set方法  } action方法         

Excel单元格内容太多会覆盖遮住下一单元格范围

Excel单元格内容太多会覆盖遮住下一单元格范围分步阅读 Excel中的单元格内容,有着不同的对齐方式.用户可根据自己的需求,在处理数据的时候,自行设置所需要的对齐方式. 当您在处理数据的时候,如果设置不当,就会遇到这样的问题:Excel单元格内容太多会覆盖遮住下一单元格范围. 可以通过如下的方法来解决. 方法/步骤 如下图,B2单元格,仅输入了几个中文,但是,由于列的宽度不够,因此,该单元格的内容会延伸到下一单元格并覆盖了下一单元格的范围.从而影响了下一单元格的输入与修改. 此时,我们需要的方

WebDriver获取table的内容(通过动态获取Table单元格的TagName对其innerHTML值进行获取)

import java.util.ArrayList;import java.util.Iterator;import java.util.LinkedHashMap;import java.util.List;import java.util.Map;import java.util.Map.Entry;import org.openqa.selenium.By;import org.openqa.selenium.JavascriptExecutor;import org.openqa.se