我的 CSS 代码中的奇怪错误使文本随机获得巨大的“边距”

Posted 2023-03-06

【中文标题】我的 CSS 代码中的奇怪错误使文本随机获得巨大的“边距”

【英文标题】：Weird bug in my CSS code making the text randomly get a huge "margin"

【发布时间】：2011-05-30 01:40:16

【问题描述】：

我不知道为什么会这样。

我有this code here。

它工作正常，但“有时”（连续多次）没有明显的原因，会发生这种情况：

致所有.box 班级。

抱歉，我必须分享“所有”我的代码，但我不知道这是为什么。

它应该是这样的：

我不知道这是否常见但你想要的 id，你可以从here（html 和 CSS + 图像）下载这两个文件，因为在 jsfiddle 中似乎一直有效，

我不知道这是否重要，但我在 Mac 上使用 chrome（最新）。

编辑：我似乎每次在 safari 中都能正常工作。

提前致谢！！请要求任何需要的澄清！

---

顺便说一句，我的标题太糟糕了，对不起！但我不知道问题出在哪里，所以我无法真正描述它，请随时编辑或评论任何建议。

【问题讨论】：

在你的小提琴中看起来不错。您是否添加了 clear:both;到你的容器 div？

不，我没有，但我现在做了，但它似乎不起作用！

【参考方案1】：

在你的style.css上

删除#container上的overflow:hidden 将 overflow:hidden 设置为 .box 将 float:left 设置为 .box img 将 float:right 设置为 .follow

新的

#container 
    height:100%;
    width:520px;
    position:relative;
    left:50%;
    margin:20px 0 0 -250px;

.box 
    border:1px solid gray;
    height:200px;
    width:500px;
    float:left;
    margin:0px 0 20px 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow:hidden;

.box img 
    width:140px;
    height:140px;
    margin: 15px 0 0 15px;
    float:left;

.follow 
    /*outline:1px solid red;*/
    height:80px;
    width:260px;
    float:right;
    margin:25px 30px 0 0;

【讨论】：

谢谢，我错了，但似乎并没有解决问题:)

【参考方案2】：

为了让你的 css 更简洁，当你声明 .box:hover 的样式时，你不需要重新声明已经应用于 .box 的东西。所有 .box 样式都由 .box:hover 继承。 （例如，你如何在两者上都有 float:left ）。

话虽如此，这几乎可以肯定是float 的问题。调整两个内部 div、外部 div 和 img 的 float 和 clear 属性，看看你是否从中学到了什么。当问题没有出现在小提琴中时，很难提供帮助。

【讨论】：

我修复了.box:hover 谢谢！！我已经尝试了很多 float 和 clear 的组合，但似乎没有任何解决方法！ （如果你想当然！！！！）但你可以从这里下载文件：box.net/shared/b6i335rguy