Android浏览器在出现'；s边框半径小于整个边框宽度_Android_Html_Css

Android浏览器在出现'；s边框半径小于整个边框宽度

android html css

Android浏览器在出现'；s边框半径小于整个边框宽度,android,html,css,Android,Html,Css,感谢打开它的人我认为，这与我看到的截图几乎相同，尽管截图与我看到的截图有着奇怪的不同我想做的是创建一个带有厚顶边框和圆角的长方体。这在桌面浏览器（支持border radius的浏览器）以及iOS Safari和带有Chrome的Android浏览器上运行良好，但旧的Android浏览器显示了以下内容：（来源：）渲染边界时，曲线以外较厚的部分不会到达边缘。有人知道有没有办法让浏览器正常运行吗？这似乎是一个持续的bug，至少可以追溯到Android 2.3；屏幕截图来自4.0.3手机

感谢打开它的人

我认为，这与我看到的截图几乎相同，尽管截图与我看到的截图有着奇怪的不同

我想做的是创建一个带有厚顶边框和圆角的长方体。这在桌面浏览器（支持

border radius

的浏览器）以及iOS Safari和带有Chrome的Android浏览器上运行良好，但旧的Android浏览器显示了以下内容：

（来源：）

渲染边界时，曲线以外较厚的部分不会到达边缘。有人知道有没有办法让浏览器正常运行吗？这似乎是一个持续的bug，至少可以追溯到Android 2.3；屏幕截图来自4.0.3手机

以下是JSBIN中的HTML：

<body class=single>
  <div class=dialog-bound>
    Hello World
  </div>
</body>

编辑-这里还有一件值得注意的事情：在我的HTC One X手机和Nexus 7上，上面的CSS在Chrome和Firefox中完美工作。它也可以在Firefox的Android 2.3下运行在我的Atrix上。因此，我真的怀疑这是一个虚拟像素与实际像素的问题，因为这些设备上的所有浏览器都同意视口大小

您可以显示您的属性是

最大宽度：32em所以你应该注意
当字体出现时，“Hello World”边框变成
较大且字体边框前后较小
实际最大宽度：
物业运作良好
大小可调
因此，您应该修复此问题属性use Width=%used
这是android浏览器的问题，它绘制圆角，如果边框宽度
高于半径，则半径区域不填充
如果边框宽度小于半径，则浏览器无法很好地绘制（您可以在中看到）
在android的bug追踪器上，我没有看到任何相关的问题，我认为这是同一个问题，也许这是一个好主意——打开一个（我在上面：p）
我知道这算不上一个好的答案：p，但如果你想要这个效果，你可以添加两个div，一个用于边框顶部，另一个用于边框底部，并使用半径和背景进行操作：
（这里的例子是：）
我的测试是在一个完全更新的galaxy Nexus中进行的。
这确实是Android的bug，但它可能会被这样的伪元素欺骗
HTML代码是一样的，CSS在Sony Ericsson Xperia上的Android 4.0.3默认浏览器和同一部手机的最新Chrome mobile上测试的情况就不那么像这样了
body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound {
  background-color: #FFFCF2/*#mainBackground*/;
  padding: 2px 5px 4px 5px;
  position: relative;
  margin: 50px auto;
  max-width: 32em;

  &::after,
  &::before {
    border-style: solid;
    border-color: #89BAE2;
    content: '';
    left: 0; right: 0;
    position: absolute;
  }

  &::after {
    border-width: 1.8em 1.8em 0 1.8em;
    top: 2px; margin-top: -1.8em;
    border-radius: .6em .6em 0 0;
  }

  &::before {
    border-width: 0 0.6em 0.6em 0.6em;
    bottom: 2px; margin-bottom: -0.6em;
    border-radius: 0 0 .3em .3em;
  }
}

对不起，我不明白你在说什么。问题与在任何情况下使用max width
属性无关；无论是否存在，都会发生不正确的渲染。max width
属性与边框的宽度无关。是的，我想我注定要这样做，但我要看看是否可以让它在：before
和：after中使用。谢谢你的努力；我会等一两天，然后奖励奖金。是的，这几乎就是我最后做的。我还不得不使用一些负边距技巧来回避一些填充问题，还有一种奇怪的趋势，浏览器会在添加的元素和边框之间留下模糊的白线，但除此之外，它是有效的。是的，在我的例子中，这些间隙只出现在桌面Chrome上，对于Android浏览器来说一切都很好，所以必须在底部和顶部分别添加2px，并对其进行补偿，再加上paddingWell的2px，我为Modernizer添加了一个浏览器嗅探器，这样我就可以只为本机Android浏览器添加规则，这样其他客户端就可以获得常规边框。（做浏览器嗅探不是件愉快的事，但这是我会选择它的罕见案例之一。）可能功能检测会更好，但要找出这方面的独特行为是一个挑战，可能有人已经做得很好了。是的，功能检测要好得多，但根据我的经验，“bug检测”可能相当困难，尤其是像这样的渲染错误：-）
<body class=single>
  <div class=dialog-bound>
    <div class="bordertop"></div>
    <div class="content">Hello World</div>
    <div class="borderbottom"></div>
  </div>
</body>

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound{
  margin: 50px auto;
  max-width: 32em;
  background: transparent;
}
body.single .dialog-bound .content{
  padding: 0 5px 2px 5px;
  background-color: #FFFCF2;

}
body.single .dialog-bound .bordertop{
  border-radius: 10px 10px 0px 0px;
  background:#89BAE2;
  height:28px;
  -webkit-border-radius: 10px 10px 0 0;
}
body.single .dialog-bound .borderbottom{
  border-radius: 0 0 5px 5px;
  background:#89BAE2;
  height:8px;
  -webkit-border-radius: 0 0 5px 5px;
}

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound {
  background-color: #FFFCF2/*#mainBackground*/;
  padding: 2px 5px 4px 5px;
  position: relative;
  margin: 50px auto;
  max-width: 32em;

  &::after,
  &::before {
    border-style: solid;
    border-color: #89BAE2;
    content: '';
    left: 0; right: 0;
    position: absolute;
  }

  &::after {
    border-width: 1.8em 1.8em 0 1.8em;
    top: 2px; margin-top: -1.8em;
    border-radius: .6em .6em 0 0;
  }

  &::before {
    border-width: 0 0.6em 0.6em 0.6em;
    bottom: 2px; margin-bottom: -0.6em;
    border-radius: 0 0 .3em .3em;
  }
}