IE8 中的 CSS 圆角 [英] CSS rounded corners in IE8

查看：41 发布时间：2021/12/18 12:25:43 css internet-explorer internet-explorer-8 rounded-corners

本文介绍了IE8 中的 CSS 圆角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 IE8 中遇到圆角问题.我尝试了几种方法都没有成功.

这是我的代码:

<头><title>无标题页</title><风格>身体 {字体系列:Arial、Helvetica、sans-serif；字体大小:0.8em；填充:2px；边距:2px；颜色:#505050；行高:正常；}p{边距:4px；}.categoryheading3 {-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;背景色:#297BB6；颜色:#FFFFFF；字体大小:16px；字体粗细:700；填充:8px 0;文本对齐:居中；边距:0px；}.leftcolumn {宽度:174px；填充:8px；向左飘浮;显示:内联块；背景色:透明；/*--最小高度:500像素*/溢出:隐藏；}.lefttop {显示:内联块；宽度:继承；边距:0 5px 2em 0；向左飘浮;宽度:160px；背景色:#FFFFFF；边框:2px 实心 #297BB6；-moz-border-radius: 10px;-webkit-border-radius: 10px;边框半径:10px；}</风格><身体><div class="leftcolumn"><div class="lefttop"><H4 class="categoryheading3">标题</H4><p>样本文本样本文本样本文本样本文本样本文本样本文本样本文本样本文本样本文本样本文本样本文本样本文本</p>

在 Firefox 中产生这个:

但这在 IE8 中:

如果有人有任何提示，我将不胜感激！

约瑟夫通过建议使用 pie.htc 提供了帮助，但是我仍在努力解决此元素不起作用的问题:

.categoryheading3 {-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;行为:网址(PIE.htc)；背景色:#297BB6；颜色:#FFFFFF；字体大小:16px；字体粗细:700；填充:8px 0;文本对齐:居中；边距:0px；}

解决方案

Internet Explorer(版本 9 下)本身不支持圆角.

有一个神奇的脚本可以神奇地为您添加它:CSS3 PIE.

我已经多次使用它，效果惊人.

I'm having issues with rounded corners in IE8. I've tried a few methods without success.

Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  padding: 2px;
  margin: 2px;
  color: #505050;
  line-height: normal;
}
p {
  margin: 4px;
}
.categoryheading3 {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}
.leftcolumn {
  width: 174px;
  padding: 8px;
  float: left;
  display: inline-block;
  background-color: transparent;
  /*--min-height: 500px*/
  overflow: hidden;
}
.lefttop {
  display: inline-block;
  width: inherit;
  margin: 0 5px 2em 0;
  float: left;
  width: 160px;
  background-color: #FFFFFF;
  border: 2px solid #297BB6;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
</style>


</head>
<body>

<div class="leftcolumn">
  <div class="lefttop">
    <H4 class="categoryheading3">Heading</H4>
    <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
  </div>
</div>
</body>
</html>

Which produces this in Firefox:

But this in IE8:

If anyone has any tips I'd be very grateful!

edit: Joseph helped by suggesting to use pie.htc, however I'm still struggling with this element not working:

.categoryheading3 {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  behavior: url(PIE.htc);
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}

解决方案

Internet Explorer (under version 9) does not natively support rounded corners.

There's an amazing script that will magically add it for you: CSS3 PIE.

I've used it a lot of times, with amazing results.

这篇关于IE8 中的 CSS 圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

IE8 中的 CSS 圆角 [英] CSS rounded corners in IE8

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

IE8 中的 CSS 圆角 [英] CSS rounded corners in IE8

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭