Border-radius and padding not playing nice

12 浏览
0 Comments

Border-radius and padding not playing nice

我在尝试给图片设置圆角时遇到了困难。为了演示目的，我简化了问题并夸大了变量。\nCSS：\ndiv.wrap img {\n -moz-border-radius: 50px;\n border-radius: 50px;\n}\nimg.pic {\n padding: 15px 25px 35px 45px;\n}\nHTML：\n\n如果我去掉padding，圆角就会消失。\n如果有帮助的话，它们为什么要在两个不同的类中。\"wrap\"中可以有多个\"pic\"。有时它们会是相同的类，有时不会，就像这样：\nimg.left_pic { float:left; padding:5px 10px 5px 5px; }\nimg.right_pic { float:right; padding:5px 5px 5px 10px; }\n感谢任何帮助和见解。\njsFiddle: http://jsfiddle.net/NwfW6/\n编辑以获得解决方案：\n这个基本上是我想要做的事情。我想我当时有些迷糊了。现在我确定我需要使用的声明是margin而不是padding。再次感谢GGJ提醒我正确的做法。至于Jan关于给\"img\"标签添加padding没有意义，确实如此。我的错误。

0

3 答案

0 Comments

问题出现的原因是在某些浏览器（主要是IE和Safari）中，对同一个元素同时应用padding和border-radius会出现问题。border-radius改变了包围padding组件的边框组件的曲率。

解决该问题的方法之一是添加一个边框线。如果你不想看到边框，你可以使用border: 1px solid transparent，像这样：

.invisible-border {
    border: 1px solid transparent;
}

你可以在jsFiddle上查看示例。图片如下所示：

![screenshot](https://i.stack.imgur.com/rXpoK.png)

0
0 Comments

问题的原因是对图片设置了 padding，而不是在 "wrap" 元素上设置 padding。解决方法是在图片外面添加一个实际的包装元素。


  pic




.wrap {
  padding: 10px;
}
img {
  border-radius: 50%;
}

这样就能解决 "Border-radius and padding not playing nice" 的问题了。

0
0 Comments

边框半径（border-radius）和内边距（padding）之间存在一些兼容性问题，可能导致设置的边框半径无法正确显示在内边距之内。解决这个问题的方法是使用外边距（margin）来代替内边距，以便在边框之外创建空间。

通常情况下，我们可以通过设置边框半径来使元素的边框呈现出圆角效果。然而，在某些情况下，当我们设置了边框半径并同时设置了内边距时，边框半径可能会超出内边距的范围。

为了解决这个问题，我们可以尝试使用外边距来替代内边距。外边距可以在边框之外创建空间，不会受到边框半径的影响。

下面是一个例子，展示了使用外边距替代内边距的方法：

.example {
  border: 1px solid #000;
  border-radius: 10px;
  margin: 20px; /* 使用外边距替代内边距 */
}

在上面的例子中，我们将边框半径设置为10像素，并使用外边距为元素创建了20像素的空间。通过这种方式，我们可以确保边框半径不会超出外边距的范围，从而解决了边框半径和内边距之间的兼容性问题。

总结起来，当边框半径和内边距之间出现兼容性问题时，我们可以尝试使用外边距来代替内边距，以确保边框半径的正确显示。通过设置外边距，我们可以在边框之外创建空间，避免边框半径超出内边距的范围。这样，我们就能够解决边框半径和内边距之间不兼容的问题。

0