Jadual Kandungan
回复讨论(解决方案)
Rumah hujung hadapan web html tutorial chrome中完全一样属性的2个div,显示不一样_html/css_WEB-ITnose

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

Jun 24, 2016 pm 12:08 PM

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


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

请大家帮忙看看
谢谢。


回复讨论(解决方案)

没办法打开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块类似的功能,实现的步骤却不同,这个你得自己检讨一下,呵呵。一般思维都会写成类似的,就不会出现这种情况了。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1664
14
Tutorial PHP
1266
29
Tutorial C#
1239
24
Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku Apr 18, 2025 am 12:09 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web Apr 19, 2025 am 12:02 AM

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web Apr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan Apr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Membina struktur laman web HTML: Membina struktur laman web Apr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Peranan HTML: Penstrukturan Kandungan Web Peranan HTML: Penstrukturan Kandungan Web Apr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

See all articles