Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >td在relative模式下，IE9不显示border,chrome正常显示边框

td在relative模式下，IE9不显示border,chrome正常显示边框

申君健

发布于 2018-09-21 07:34:50

发布于 2018-09-21 07:34:50

96300

代码可运行

举报

文章被收录于专栏：前端侠2.0前端侠2.0

运行总次数：0

代码可运行

百度上怎么也搜不出答案，很奇怪的问题。在IE9的 F12调试中，明明td有1个像素的边框，偏偏不显示。

最后用bing搜索，找到老外的帖子。就立马解决问题。这让我感觉像是，一般医生折腾也看不好病，好医生总能一语中的。对国外同行由衷佩服。

/*这样不显示边框*/
.thisTd
{
    position:relative;
}
/*第一个老外说这样，立马有边框*/
.thisTd
{   z-index=-1;
    position:relative;
}

但这样，td是显示在table之下的，当移动时，会被table的其它部门盖住。

/*第二个老外说这样，成功*/
.thisTd
{    background-clip: padding-box;
    position:relative;
}

原来背景也有边界的：决定背景会盖住哪些部分。

background-clip: border-box    
background-clip: padding-box
background-clip: content-box

background-clip: inherit

豁然开朗！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2014/07/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

CSS实现渐变色边框（Gradient borders）的5种方法

css html 编程算法

给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。

MudOnTire

2022/03/22

13.6K0

CSS实现渐变色边框（Gradient borders）的5种方法

background-clip的正确使用姿势

background-clip可以用来控制背景图片／颜色的填充范围。我们知道，默认的background会填充盒模型的content+padding+border区域内。（可以将border颜色设为透明进行观察）

贾顺名

2019/12/10

1.8K0

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉

Sb_Coco

2018/05/28

6670

wxss学习系列《三》背景（Background）与颜色（Color），边框(Border)

一、背景（Background）与颜色（Color）一、背景：background。设置对象的背景特性。一个元素可以设置多重背景图像，每组之间用逗号隔开，如果存在重叠关系，前面的背景图像会覆盖在后

极乐君

2018/02/05

3.1K0

wxss学习系列《三》背景（Background）与颜色（Color），边框(Border)

Css3新特性总结之边框与背景（一）

本系列主要总结Css3一些新特性的认识，来源于《css揭秘》书。一、半透明边框 css3最好用hsla，而不是rgba，hsla是：h：颜色值(0~360)；s：饱合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1) background-clip：裁剪背景颜色，默认为border-box(背景颜色扩散到border）；padding-box（背景颜色扩散到padding）；content-box（背景颜色扩展到content) 示例代码： width:200px; height:20

sam dragon

2018/01/17

8290

【CSS】背景样式：background

面向对象编程

本节主要关注背景如何展示。 background 在一个声明中设置所有背景属性。 div{ background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 可以按顺序设置如下属性： background-color background-position background-size background-repeat background-origin background-clip background-attachment backgrou

毛大姑娘

2021/05/08

1.7K0

background-clip默认从border开始的哈

background border

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>114-背景绘制区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; float: left;

贵哥的编程之路

2020/10/28

2250

与我一起学css3:background-size,-clip

大家好，今天与大家一起学习分享css3中的background-size,background-clip使用与实践。

RobinsonZhang

2018/08/28

6920

与我一起学css3:background-size,-clip

CSS 边框也能动画？background-origin 和 -clip 来施加魔法~

https 编程算法网络安全 css

边框通常设置属性 border/box-shadow/outline，通过它们即可以实现不同的边框效果。

掘金安东尼

2022/11/18

8700

CSS 边框也能动画？background-origin 和 -clip 来施加魔法~

CSS3: 设计一个半透明边框

every-day-css-1 css-设计一个半透明边框先看一下效果： lpx1rlr4j9.codesandbox.io/ 根据 background-clip的不同设置的不同情况关键

西南_张家辉

2021/02/02

6210

在CSS3之前我们对背景图片的控制极为有限，只能决定其来源、位置、重复，CSS3的到来对背景的使用开辟了一片新天地。 1、background-size 在 CSS3中，background-size 属性规定背景图像的尺寸。这就允许我们在不同的环境中重复使用背景图片，以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 length:设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto。 percentage: 以父元素的

小胖

2018/06/27

1.1K0

vue 渐变色文字

☞ 注意 text-fill-color 一般设置为 transparent（透明），然后使用 background-image 渐变颜色来设置文字的背景色，使用 background-clip 来截取文字

Demo_Null

2020/09/28

2.6K0

css3的一些新属性总结

box-sizing规定了盒子的计算方式，常用于消除hover时，盒子之间的影响，有三个属性：

一个淡定的打工菜鸟

2018/09/06

3850

html+css学习笔记017-H5新背景属性0颜色0倒影0遮罩

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终深刻的感觉到一个强大的文案就是一家公司的营销精髓比如：《卫龙》《阅后即瞎》《网易论坛》《vivo商城客服》 ...... <!DOCTYPE html>  <html lang='en'>  <head>  <meat charset='UTF-8'/> <!-- 网页字

Mr. 柳上原

2018/09/05

7380

CSS背景缩写、简写详细

CSS背景缩写、简写不太会这个，到网上搜了下，发现写的都不中意，就想到自己写一个出来背景共有8个属性： background-color 背景颜色 background-position 背景图像的位置 background-size 背景图片的尺寸 background-repeat 如何重复背景图像 background-origin 背景图片的定位区域 background-clip 背景的绘制区域 /* 底部详细说明 */ back

我不是费圆

2020/09/21

2.4K0

巧妙实现带圆角的渐变边框

border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。

Sb_Coco

2020/02/21

7.2K1

CSS3 Background 属性介绍

background border padding position size

与border类似，ie对新的background属性都是不支持的。多的就不说了，来看看，新的background 属性吧。

py3study

2020/01/14

7480

CSS中的background属性与margin和padding内外边距的关系总结

auto background position repeat size

background-image：定义背景图像。需要用 url('...') 引入图片。

德顺

2019/11/13

7.7K0

CSS中的background属性与margin和padding内外边距的关系总结

[Java小工匠]CSS背景1-概述

background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

Java小工匠

2018/08/10

6480

CSS3-边框和背景

CSS3中边框和样式得到了增强。例如：可以创建圆角边框，使用图像边框，为元素创建阴影。

奋飛

2019/08/15

1.5K0

相关推荐

CSS实现渐变色边框（Gradient borders）的5种方法

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验