使用CSS3 PIE设置输入[type = submit]样式时IE8崩溃

Question

Sometimes the page works and you need to refresh the page to see it crash.

You can see a live sample here: http://rcnhca.org.uk/sites/first_steps/account/ (ie7 works fine, I am not supporting ie6)

I am attempting to style my submit button with the following values:

a.button, input.button {
    border: 2px solid #3A90A7;
    border-radius: 5px 5px 5px 5px;
    color: #202D32;
    display: block;
    float: left;
    height: 2.6em;
    line-height: 2.6em;
    margin: 0.667em 0.333em;
    padding: 0 1em;
    position: relative;
    text-decoration: none;
}

a.button:hover, input.button:hover{
    border: #202d32 solid 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}

input[type=submit] {
    behavior: url(http://rcnhca.org.uk/sites/first_steps/PIE.htc);
    position: relative;
    -pie-poll:true;
}

a.button:hover, input.button:hover{
    -pie-box-shadow: none;
}

.button {
    -pie-background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
}

.button.active {
    -pie-background: linear-gradient(top, #b7b7b7 0%,#b7b7b7 8%,#e5e5e5 8%,#ffffff 100%);
}

Finally, the submit button in all it's glory:

<input id="submitbtn" class="button omega" type="submit" value="Create your account" name="submit">

Does anyone know what could be causing this crash? I don't get any information apart from a script is causing the page to run slowly.

Answer 1

I had the same problem and I discovered that my button did not work in IE8 beacuse I needed one of the borders to be none and this crashed my CSS3PIE. I changed from border-left: none; to border-left-width: 0; and it worked.

Answer 2

I am gonna check and test but first you need to know some stuff about CSS3PIE

CSS3PIE uses VML -vector markup language- that allows you to draw graphics using Javascript, and it includes functions to create popular CSS3 like effects but limited.

Because it uses Javascript to draw the graphics, It utilize a lot of the browser resources and cause it to hang and eventually crash.

I was using CSS3PIE before but I dropped it after reading this impressive analogy by Paul Irish . You should focus on adapting your design to gracefully degrade on IE. It would be better if you used something like Modernizr to check for the missing features in the browser and add specific styling to it.

Will be back after testing

Update

I tested in IE8 and yes it crashes. There's nothing you can go for I think :(

I would recommend you fallback for a solid light grey color or use a background gradient image.

Answer 3

With some more testing I found the answer to this problem, it wasn't the fact that it was submit button but that it was some kind of form button and I gave it font-size .

If I remove the font-size property on the element then IE8 stops crashing and I'm a happy bunny.

Apologies as I didn't include the part of the CSS which had the font-size (It's a big file, I glazed over it).