css3pie - Buttons and Pie Css -
I have CSS and have a strange gesture with IE8, where the pie applied the boundary-radius property to an element , But its background element (a gradient or a flat color) exceeds the boundaries and it seems that it is at the top, the real element is hidden.
I have been working with CSS for a while. I know that it requires pie.php when using PHP on the environment and the right place for the pie is in the root of the site. I had never had this problem, but now I am facing this problem using a responsive framework. The button we created with this structure:
& lt; P class = "btn" & gt; & Lt; A href = "#" & gt; Learn more & lt; / A & gt; & Lt; / P & gt; CSS:
.btn {status: relative; Display: Inline-block; Width: Auto; Height: 36px; Font-size: 16px; Line-height: 36px! Important; Border: 1px solid # a0c401; Boundary-radius: 4px; Cursor: indicator; Margin: 0 20 px 0; -WebKit-Box-Shadow: Inset 0 1px 1px #fff, 0 1px 2px RGBA (0,0,0,0.31); / * If you want a drophead on your button * / box-shadow, then remove this line: INSET 0 1px 1px #fff, 0 1px 2px rgba (0,0,0,0.31); / * If you want a drophead on your button * / background: # c0eb03, then remove this line; / * Old browser * / background: -Mo-linear-shield (top, # c0eb03 0%, # a8cd01 100%); / * FF3.6 + * / Background: -WebKit-Gradients (Linear, Left, Left-Down, Color-stop (0%, # c0eb03), Color-stop (100%, # a8cd01)); / * Chrome, Safari 4 + * / Background: -webkit-linear-shield (top, # c0eb03 0%, # a8cd01 100%); / * Chrome 10+, Safari 5.1 + * / Background: -O linear-shield (top, # c0eb03 0%, # A8CD 101 100%); / * Opera 11.10+ * / Background: -MMS-linear-shield (top, # c0eb03 0%, # a8cd01 100%); / * IE10 + * / Background: Linear-gradient (top, # c0eb03 0%, # a8cd01 100%); / * W3C * / Filter: Prozed: DXImageTransform.Microsoft.gradient (startColorstr = '# c0eb03', endColorstr = '# a8cd01', GradientType = 0); / * IE6-9 * / -pip-background: Linear-gradient (top, # c0eb03 0%, # a8cd01 100%); Behavior: url ("PIE.php"); Z-index: 10! Important; } .btn a, .btn: a {display: block; Text-shadow: 0 px 1 px 1 px rgba (199, 243, 6, 1); Text-transform: uppercase; Font-family: 'AvantGardeGothicITCW01D 731075'; Padding: 0 20px; Text align: center; Text-decoration: None; Color: # 6a8100; Text-shadow: 0 px 1 px 1 px rgba (199, 243, 6, 1); }
This filter is overflow; It is not necessary if you are providing shield via PI-PI-background, remove the filter and all should be fine.
Comments
Post a Comment