代码之家 › 专栏 › 技术社区 › macleojw

firefox中表周围的<div>边框有问题

cross-browser css html

macleojw · 技术社区 · 15 年前

我希望此代码在表周围显示边框。它可以在Internet Explorer中使用,但不能在Firefox中使用。在Firefox中,它在表格上方显示一条水平线。如果我加上其他东西,例如 <br /> 在DIV中,边框显示正确。如果移除对齐属性,它也可以工作。
这种行为的原因是什么?

<body>  
  <div style="border-style: solid; border-width: 1px;  
    border-color: #A8A8A8; width: 100%">
    <table align="left" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td align="center">
          Sample Text<br />
        </td>
      </tr>
    </table>
  </div>
</body>

2 回复 | 直到 15 年前

Quentin 15 年前

该表使用已弃用的 align 属性。这已被CSS替换 float 属性和具有相同的效果。

默认情况下,浮动元素不会影响其容器的高度(我相信在IE中没有正确实现此功能,如果doctype触发了quirks模式,这可能会解释呈现中的差异。添加一个触发doctype的标准模式,以避免这一点和浏览器之间的许多其他不一致)。

这是因为它们的设计目的是达到如所示的效果 http://complexspiral.com/publications/containing-floats/

见 http://www.ejeliot.com/blog/59 有很多方法可以使容器扩展到覆盖浮动上下文。我发现溢出:隐藏技术通常是最好的选择。

Zoidberg 15 年前

把这个放在你的标签后面

<div style="clear:left;"></div>

那会解决的。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前