CSS Transparent Border Problem In Firefox 4?

问题

I'm trying to create a pure CSS triangle for a tooltip. All browsers looks fine except for the latest Firefox 4. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
.arrow {
    border:50px solid;
    border-color:#eee transparent transparent transparent;
    display:block;
    height:0;
    width:0;
    top:50%;
    right:50%;
    position:absolute;
}
</style>
</head>
<body>
<div style="border:1px solid #000; height:400px; width:400px; margin:50px auto; position:relative;">
    <span class="arrow"></span>
</div>
</body>
</html>

Firefox 4 Screenshot:

Other Browsers Screenshot:

As you can see in Firefox 4, it has something like a border. Is it a Firefox bug or this is really the behavior?

How can I achieve a pure CSS triangle without that visible border in FF4? Also, I need the other 3 colors to be transparent because this triangle will overlap some elements.

回答1:

if transparent is not work for you then use rgba may be that's work.

Write:

.arrow {
    border-color:#eee rgba(255,255,255,0)  rgba(255,255,255,0)  rgba(255,255,255,0);
}

回答2:

Okay I could see the problem, and found out that if you change the border style to "outset" if will be fixed in FF4, and works in IE9 too.

That would give you something like this:

.arrow {
     border:50px outset transparent ;
     border-top:#eee 50px solid;
     display:block;
     height:0;
     width:0;
     top:50%;
     right:50%;
     position:absolute;
}

PS. I'm on Vista with the newest firefox stable.

Here is the jsFiddle: http://jsfiddle.net/UFSpd/1/

来源：https://stackoverflow.com/questions/6225284/css-transparent-border-problem-in-firefox-4

标签

css

transparent

firefox4