Reputation: 928

Bootstrap buttons with square corners in IE9

I'm really tearing my hair out over this one. I'm trying to make a fairly simple page with a little bit of text, two radio buttons and a submit button. So far it looks fine in Firefox and Chrome, but in IE9 the submit button has square corners:

IE9 submit button issue

When I look at the example pages on the Bootstrap website the corners of the buttons are all properly rounded, so it must be something I'm doing rather than an issue with IE. I just can't figure out what.

<div class="container">
<div class="jumbotron">
    <div class="container">
        <h1>The welcome page.</h1>
        <p>Welcome to our page. Please select one of the options below and press 'Submit'.</p>
        <form>
          <div class="form-inline">
            <div class="radio">
                <input checked="" id="1-1" name="1" value="opt1" type="radio">
                    <label for="opt1">Option 1</label>
                <input id="1-2" name="1" value="opt2" type="radio">
                    <label for="opt2">Option 2</label>
            </div>
            </div>
          <input class="btn btn-lg btn-primary" value="Submit" type="submit">
        </form>
    </div>
</div>

Here's a demo: http://bootply.com/78669

UPDATE: This might help to narrow it down. When I load the page from a new location in IE9, the submit button looks the way it should:

Button rendering properly

...but I get the 'IE restricted this page from running scripts or ActiveX controls' message. If I click to allow blocked content, that's when the button corners go square.

Upvotes: 0

Answers (4)

stuwest

Reputation: 928

Following commenter Ryan McDonough's advice, I went through the file and stripped out as much css as I could, and found the problem. Which was:

<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">

Remove the link to bootstrap-theme, and everything works as it should.

Upvotes: 1

Ryan McDonough

Reputation: 10012

The issue will lay in your IE 9 settings, I'm currently running IE 9 and the corners are rounded. Make sure to check your developer options (F12) and see if you are running in

BROWSER MODE: IE 9 and DOCUMENT MODE: IE9 STANDARDS

Find a screenshot showing these options at the top right here.

Upvotes: 2

Nishan Hitang

Reputation: 805

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

There's an amazing script that will magically add it for you: http://css3pie.com .Hope you will figure out the rest.