`
happear
  • 浏览: 47957 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

html的table标签的一个怪异行为

阅读更多

其实也不算是怪异吧,主要还是自己对table用的较少,没有掌握得比较好而已。具体经过如下:

项目中需要做一个页面,效果如下:


本也没有什么大的问题,关键就是设置好td的“colspan”和“rowspan”,但是做出来的时候偏偏就出了问题,实际效果如下图:



 找了很久原因,最后定位了问题:

在项目的基础css控制文件中,关于table 的tr、td标签,有一个全局的设置:vertical-alignbaseline;

就是这个属性设置出了问题,在自己的css控制文件中给table的tr、td添加了一个覆盖设置:vertical-alignmiddle;

搞定。

 

 

 

 

  • 大小: 44.1 KB
  • 大小: 27.6 KB
分享到:
评论
1 楼 zjltck 2012-10-22  
能不能详见你的代码啊。

相关推荐

    web基础简介

    当多个CSS规则应用于同一个元素时,会有一个优先级问题。通常来说,内联样式 > ID选择器 > 类选择器 > 元素选择器。 5. **样式的继承** 某些CSS属性可以被子元素继承。例如,如果父元素设置了字体大小,那么其子...

    前端面试文件content_1636425212663(1).docx

    * 标准模式和怪异模式的区别:标准模式支持浏览器的最高标准,而怪异模式是向后兼容,模拟老浏览器模式行为,防止页面无法正常工作。 * 行内元素、块级元素、空元素的区别: + 行内元素:a、img、span、b、strong、...

    面试宝典指南大全

    面试宝典指南大全是一个涵盖了前端开发中可能遇到的各类问题的知识库,特别针对HTML、CSS及JavaScript技术栈。它不仅包括基础概念和语法,也包含了解决实际问题的技巧,如浏览器兼容性问题、性能优化、代码规范等,...

    尚硅谷_前端_面试题

    例如,上一个元素设置底部背景色,下一个元素设置顶部背景色,确保它们之间没有间距。 8. **网页验证码是干嘛的,是为了解决什么安全问题。** - **网页验证码**(CAPTCHA)主要用于区分真实用户与自动化程序(如...

    面试宝典 v2-新增Vue和React.pdf

    在标准模式下,浏览器会遵循Web标准,而在怪异模式中,则可能会出现一些与标准不一致的行为,这些行为往往是为了兼容旧版的网页设计。 对于布局优化,div+css布局相比table布局具有更高的灵活性和可维护性,同时也...

    psychqtic.github.io:贾斯的怪异东西

    "psychqtic.github.io" 是一个GitHub个人网页项目,由用户贾斯(Psychqtic)创建。这个项目可能是一个展示其个人作品、博客文章或兴趣爱好的平台,使用了HTML作为主要的网页构建语言。HTML(HyperText Markup ...

    前端复习资料.pdf

    29. **link与@import**: link是HTML标签,用于加载样式表,而@import是CSS规则,用于在样式表内部加载另一个样式表。 30. **盒子模型**: CSS的盒子模型定义了元素边框、内边距、外边距和实际内容区域。 #### 前端...

    web标准常见问题(BUG)

    3. **JavaScript跨浏览器兼容性**:JavaScript代码在不同的浏览器环境下可能会有不同的行为。例如,事件处理方式、DOM操作等。使用jQuery或其他JavaScript库可以帮助解决这些问题,它们提供了统一的API并处理了兼容...

    web前端综合问题版(125题)..pdf

    布局技术包括flex、grid和table布局,以及float、clear浮动的使用。 #### CSS尺寸单位 CSS尺寸单位有px、em、rem、vw、vh等,rem单位的根节点样式应在文档的根元素上设置。 #### 定位属性 CSS的定位属性包括`...

    web前端面试题

    - 外边距重叠是指当两个垂直外边距相遇时,它们合并为一个外边距的现象。 - 重叠的结果是实际的外边距值等于两者中的最大值。 **24. rgba() 和 opacity 的透明效果有什么不同?** - `rgba()` 用于设置颜色,可以...

    javascript面试题

    此声明告诉浏览器这是一个 HTML5 文档。不同的文档类型会影响浏览器的渲染行为。 **3、Quirks 模式是什么?它和 Standards 模式有什么区别** - **Quirks 模式**:浏览器在解析时会模拟老式浏览器的行为,允许文档...

    前端面试题汇总

    ### 前端基础知识知识点详解 #### 一、HTML和CSS基础 **1.... - **浏览器兼容性测试**: 测试页面需要在不同的浏览器中进行,如Chrome、Fire...前端开发是一个不断发展的领域,掌握这些基础知识对于开发者来说至关重要。

    IE和谷歌浏览器下div宽度不一致的问题解决.txt

    - 如果使用了`float`属性,在元素后添加一个空的`div`标签,并为其设置`clear:both`样式,以清除浮动影响。 3. **优化定位属性**: - 避免混合使用`position:absolute`和`position:relative`,除非明确需要。 - ...

    web前端面试宝典

    - **作用**:指定文档类型,帮助浏览器正确解析页面,避免进入怪异模式。 - **示例**:`<!DOCTYPE html>`,表示HTML5文档。 **重要性**: - 确保浏览器使用正确的解析规则。 - 改善跨浏览器兼容性。 ##### 3. ...

    仅限于自己用的web前端面试题

    - **TD**:表示表格的一个单元格。 ### 二十一、标签嵌套示例 - 正确答案是 **D**:`<ol><li>赶集网</li></ol>`,有序列表的正确写法。 ### 二十二、发送邮件链接 - 正确答案是 **C**:`发送邮件</a>`,使用 `...

Global site tag (gtag.js) - Google Analytics