0

0

chrome中完全一样属性的2个div,显示不一样_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:08:49

|

1805人浏览过

|

来源于php中文网

原创

在chrome中,如图,表格的第3列,头部会被文字撑开,而下面内容部分就不会


两个div完全相同的属性,但是一个就是会被撑开而另一个不会, 源码我上传了,几个js和html
http://115.com/file/c2kpg3hs#test.rar

请大家帮忙看看
谢谢。

PicWish
PicWish

推荐!专业的AI抠图修图,支持格式转化

下载

回复讨论(解决方案)

没办法打开rar文件。。帮补上忙。。

都设定一样的宽度

哦rar 请从这下载
http://115.com/file/c2kpg3hs

都设定一样的宽度
上下两个td 都给了同样的高度,  style 里width 都是 99px, 但一个会被撑开,一个不会 

问题出在table.js里的第501行,table.el.css('width', '100%');

你的table设为100% 但里面表格却又用像素来设置 

我下载下来,看了有一会儿,为什么会出现这样的情况,我想不出来,但是第一个表格只有一行数据,而第二个表格有多条数据,并且我大概看了下代码,第一列和第二列是fixed:true,也就是自适应的。。

会不会跟这些原因有关。。

但其实我觉得楼主提出这个问题,无非是想让2个DIV保持一致的效果,去用JS控制自适应,我建议你不要用2人table,就用一个table就好了,第一行是表头。。因为我看你的JS代码里面写着header。。

使用一个表格,就不会出现这种上下不一致的情况。。可以让页面有更好的体现,所以,修改下插件吧。

问题出在table.js里的第501行,table.el.css('width', '100%');

你的table设为100% 但里面表格却又用像素来设置

我觉得这个也有可能,对于100%的理解,每个浏览器不尽相同,但楼主也提到了,以第一列为例,2个表格的第一列都是99象素,内容也都是一样的,凭啥第二个表格就能撑开呢?我觉得还是跟第二个表格的数据不同有关。。

引用 5 楼 dd0607 的回复:
问题出在table.js里的第501行,table.el.css('width', '100%');

你的table设为100% 但里面表格却又用像素来设置


我觉得这个也有可能,对于100%的理解,每个浏览器不尽相同,但楼主也提到了,以第一列为例,2个表格的第一列都是99象素,内容也都是一样的,凭啥第二个表格就能撑开呢?我觉得还是跟第二个表……

你运行后就知道了 他是用2个TABLE组成 一种颜色各一个

用chrome运行时 按F12 看elements里面的代码

不是为了做2个table,是为了封装一个grid控件,上面部分是grid header, 下面是每行数据,所以用了2个 table。不使用一个table的原因是,需求上垂直滚动条要包含在表格内部,而一个table的话滚动条是在外部
但可以用 F12看到,属性都是一样的,都给了相同的 width
在ie和firefox下都是正常的,只有chrome不对

问题出在table.js里的第501行,table.el.css('width', '100%');

你的table设为100% 但里面表格却又用像素来设置
这里的table是指最外层的grid,是为了适应父容器宽度,而不是指内部的2个table元素,内部的2个table元素都是固定宽度的

引用 5 楼 dd0607 的回复:

问题出在table.js里的第501行,table.el.css('width', '100%');

你的table设为100% 但里面表格却又用像素来设置

这里的table是指最外层的grid,是为了适应父容器宽度,而不是指内部的2个table元素,内部的2个table元素都是固定宽度的

你看下运行后的代码就知道了,或者你把那行屏蔽了 再试试

懒得下载了。建议楼主以后直接把代码发到这里

table.js里的第501行,table.el.css('width', '100%');

把这行注释掉,然后如果把第三列宽度改成 10, 问题照旧出现
改第三列宽度是在 test.js 第10行, width:50 //改成10

汗 我好像知道你的意思 我再看看

fit.fit();

fit给table赋值 这块检查看看

赋完值之后,上下2个table状态都是一样的

原因找到,拖动时候动态修改宽度时候的问题, body 部分是先修改父元素,再修改子元素,  head部分正好相反,chrome下就会有问题,顺序换了下就ok了:
 syncHeaderWidth: function () {
        var w = this.getTotalWidth();
        this.head.parent().width(w);
        this.head.parent().parent().parent().width(this.el.width());
    },

原因找到,拖动时候动态修改宽度时候的问题, body 部分是先修改父元素,再修改子元素, head部分正好相反,chrome下就会有问题,顺序换了下就ok了:
 syncHeaderWidth: function () {
  var w = this.getTotalWidth();
  this.head.parent().width(w);
  this.head.parent().……

其实。为什么都是你写的代码,2块类似的功能,实现的步骤却不同,这个你得自己检讨一下,呵呵。一般思维都会写成类似的,就不会出现这种情况了。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

3

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

23

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

30

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

2

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

8

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

3

2026.01.15

php图片上传教程汇总
php图片上传教程汇总

本专题整合了php图片上传相关教程,阅读专题下面的文章了解更多详细教程。

2

2026.01.15

phpstorm相关教程大全
phpstorm相关教程大全

本专题整合了phpstorm相关教程汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.6万人学习

CSS教程
CSS教程

共754课时 | 19.2万人学习

新的PHP案例(思考者)1
新的PHP案例(思考者)1

共0课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号