火狐浏览器不支持<th>绝对定位

最新推荐文章于 2025-01-06 22:51:38 发布

转载最新推荐文章于 2025-01-06 22:51:38 发布 · 588 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xingrui/p/11337274.html

场景：公司老项目页面中有table布局，jquery-validate校验输入框失败时的提示信息，火狐浏览器不能在输入框后正确显示，然而IE和谷歌正常。

问题原因：火狐浏览器自身Bug,不支持table的相关标签用于绝对定位，火狐浏览器会找第一个不是table的父元素position为relative的定位。

解决办法：把table改div布局。

转载于:https://www.cnblogs.com/xingrui/p/11337274.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aiwugang8319

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JavaScript技巧：设置元素在Firefox和Internet Explorer中的绝对定位方法

CsCufft的博客

09-22

181

在Web开发中，我们经常需要对元素进行定位，以便在页面中精确地放置它们。然而，不同的浏览器对于定位元素的方式可能存在差异，特别是在Firefox和Internet Explorer（IE）中。总结起来，要在Firefox和Internet Explorer中设置元素的绝对定位，我们可以使用JavaScript来操作元素的样式属性。需要注意的是，随着IE的不断更新，新版本的IE已经对这些样式属性进行了支持，因此上述的兼容性处理只适用于IE9及更早版本。要设置元素的绝对定位，我们需要使用CSS属性。

绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器。

daxiang3255的博客

12-24

127

详细解说，直接看样式：#dingwei{padding:10px;background-color:#003300;color:#FFFFFF;width:600px;height:300px;display:block;position: absolute;top:50%;left:50%;margin-left:-300px;margin-top:-150px;} ...

参与评论您还未登录，请先登录后发表或查看评论

火狐浏览器，绝对定位元素设置display:box失效及解决办法

xuexizhe88的博客

07-08

3766

火狐浏览器下绝对定位失效 *{padding: 0;margin: 0;} body{position: relative; } .wrap{ width: 200px; height: 200px; background-color: lightcoral; position: absolute; left: 150px;

关于html表格结构标签thead，tfoot，tbody使用出现不兼容性

front_endxiaobaia的博客

09-27

3334

关于尽量不使用thead，tfoot，tbody这三个表格结构标签，存在浏览器兼容性问题的验证以下是不使用这三个标签时代码demo以及运行效果（搜狗浏览器下运行）： &amp;lt;body&amp;gt; &amp;lt;table width=&quot;700&quot; height=&quot;150&quot; border=&quot;1&qu

firefox下绝对定位元素重叠造成不可点击问题

zhouruitao的专栏

09-09

197

重构地图网站过程中碰到的，firefox下（无论诡异模式或标准模式）当两个绝对定位的div发生重叠（即一个div盖在另一个div上）时，下面的div变得不可点击了。解决的方法是设置z-index，z-index值大的就可以点击了。而IE下，即使z-index值高的div，下面的div中的button仍然可以点击。如下htmlbug重现： <!DOCTYPE HTML PUBLIC...

selenium webdriver在firefox 上元素定位失败解决方法

weixin_41326473的博客

12-09

423

web自动化 selenium 定位

python之selenium学习手册

金鞍少年的博客

05-14

951

python之selenium学习手册

001JavaWeb概论与框架搭建【详细补充】

m0_73920839的博客

01-06

1163

10天完成javaweb学习正在持续手打更新中… 10天完成javaweb学习正在持续手打更新中… JavaWeb JavaWeb化繁为简 JavaWeb是使用Java语言开发的Web应用程序。它的作用主要包括提供跨平台的应用开发、实现动态网页内容、支持复杂的业务逻辑处理等。

HTML5和CSS3 WEB技术开发

张晨光老师的播客

01-02

7674

B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup

css table抖动

最新发布

06-17

示例代码（两个表格）：HTML:```html<divclass="table-container"><tableclass="header-table"><thead><tr><th>列1</th><th>列2</th></tr></thead></table><divclass="table-body-container"><tableclass="body-...

普歌-前端复习总结HTML+CSS-超详细，超全面（内容较多，建议收藏）

weixin_52791256的博客

04-05

1万+

普歌-HTML5+CSS复习总结一.HTML基础二级目录三级目录一.HTML基础二级目录三级目录

关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题

weixin_34197488的博客

10-05

382

关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题：第一种情况： 1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...

火狐浏览器初始化时 position定位失效问题解决

qq_56538005的博客

01-18

585

后面突发奇想看看是不是因为是inline-block 的原因导致的然后将其修改为了block,还真解决了。今天测试突然给我提了个bug，在火狐浏览器上选择器的icon错位了，其他浏览器没问题具体样式如下。感觉是个奇怪的问题，以此记录，具体原因我也懒得纠结了。查看具体代码的时候百思不得其解网上也找不到原因。

火狐浏览器中的flex－box与position冲突的解决

喵咪不爱吃鱼的博客

08-18

3786

最近做了一个公司的分享页面，上面的导航栏，是采用flex-box和position的绝对定位，进行实现的，在chrome和safair中的实现的都是好的，本来以为万事大吉，就只差发布的时候，却出现呀，老大兴冲冲的拿来火狐浏览器的，妹子当时就泪崩了，我天，竟然冲突了。然后妹子就火急火燎进行上网百度呀谷歌呀，最终发现了问题的所在，原因是因为

关于火狐在<td>中不支持使用position:relative

BZ门

07-27

2978

早些时候在写一个界面的时候,由于要在输入框下设置一个提示栏,手写了一个在一开始隐藏的,输入的时候显示,相对于中的,chrome中完美实现,当把整个项目放在别人电脑上运行一次后,发现原本相对定位的框跑到浏览器的左上角去了,唯一的差别就是我用的是chrome, 他用的是firefox,后来查找了一些资料,才知道这是因为在css2.1中在table中定义position:relative 是没有定义的,

解决【display：flex布局】遇上【position: absolute / fixed 】的失效问题

热门推荐

欢迎来到我的频道~

08-11

2万+

问题描述：有个这样的页面，页面是通过flex布局的，现在想将头部( 我的订单栏 )固定，那么我们第一反应就是添加定位呀，position : fixed。但是问题来了，position可以添加，但是添加之后，页面变成这样了（如下所示），也就是设置的display:flex 失效了，不起作用。 position 一般常用的属性值有三种： relative 、 absolut...

以下代码为什么不能实现从IE打开的B网页点击链接后另外火狐页面打开链接？<html> <head> <meta charset="utf-8"> <title>B网页</title> </head> <body> 我需要打开这个<a href="/ckb/login.do?action=login" target="_blank">链接</a> <script> var link = document.querySelector('a[href="/ckb/login.do?action=login"]'); link.onclick = function() { // 使用浏览器内置的方法打开链接，指定火狐浏览器为打开方式 window.open(link.href, "firefox.exe"); } return false; }; </script> </body> </html>

05-27

该代码不能实现从IE打开的B网页点击链接后在火狐浏览器中打开链接的功能，原因在于代码中的语法错误和逻辑错误。首先，代码中的`return false;`应该放在`onclick`函数的末尾，而不是放在`if`语句块的末尾。这是语法错误。其次，`window.open`第二个参数应该是窗口的名称，而不是浏览器的名称。因此，应该将`"firefox.exe"`改为`"_blank"`。这也是语法错误。最后，由于`onclick`函数的末尾缺少一对花括号，导致`return false;`语句被错误地放在了函数体外部。这是逻辑错误。以下是已经修复的代码： ```html <html> <head> <meta charset="utf-8"> <title>B网页</title> </head> <body> 我需要打开这个<a href="/ckb/login.do?action=login" target="_blank">链接</a> <script> var link = document.querySelector('a[href="/ckb/login.do?action=login"]'); link.onclick = function() { // 使用浏览器内置的方法打开链接，指定窗口名称为"_blank" window.open(link.href, "_blank"); return false; }; </script> </body> </html> ``` 这样，当用户在IE浏览器中点击链接时，链接将在新窗口中以火狐浏览器打开。