IE8 Eingabetyp Bild zeigt Grenze sogar, wenn ich Grenze auf none gesetzt

Question

Ich habe input type Bild verwendet, um meine benutzerdefinierten Schaltflächen angezeigt werden, aber aus irgendeinem Grunde IE8 zeigt angrenzen, auch wenn ich in CSS Grenze auf none gesetzt. In anderen Browsern zeigt es nicht Grenze überhaupt.

input[type=image] {
    margin: 0px; 
    padding: 0px;
    border: none;
    border-width: 0px;
    border-style: none;
    background-color: none;
}

Answer 1

IE nicht, dass die Wähler unterstützt sehr konsequent in meiner Erfahrung; gibt dem Eingang eine Klasse und dann Stil mit diesem statt.

<input type="image" class="imageinput" name="whatever" />

input.imageinput {
    margin: 0px; 
    padding: 0px;
    border: none;
    background-color: none;
}

Answer 2

Verwenden Sie die outline CSS-Eigenschaft:

input[type="image"] {
    border: none;
    outline: none;
}

outline zieht eine Linie um den Rand des Elements, ohne auf die Elementbreite beiträgt, und in diesem Fall IE8 könnte eine Standard Umriss angegeben haben. Lesen Sie mehr darüber bei W3Schools .

Answer 3

Erstmal Danke für diese Frage. Ich habe dieses prob vor einem Jahr konfrontiert, können Sie die Art und Weise können wählen, was Sie brauchen, aber was ich habe einfach getan wird in meinem style.css diese CSS als Ausgangspunkt eingeführt und wegen der sie nicht gibt mir einen unerwünschten Ausgang

/* Reset CSS */

body, html {
    height:100%;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    margin:0;
    padding:0;
}
body {
    line-height:1;
}
ol, ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:none;
}
:focus {
    outline:0;
}
del {
    text-decoration:line-through;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}

/* Floating & Alignment  */

.fl {
    float:left;
}
.fr {
    float:right;
}
.ac {
    text-align:center;
}
.ar {
    text-align:right;
}

/* Clear Floats  */

.col-full:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.fix {
    clear:both;
    height:1px;
    overflow:hidden;
    margin:-1px 0 0;
}
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {
    background:none;
    border:0;
    clear:both;
    display:block;
    float:none;
    font-size:0;
    list-style:none;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
    margin:0;
    padding:0;
}

Wenn Sie eine Gewohnheit zu importieren diese CSS halten werden es wird nie eine unerwünschte Ausgabe in jedem Browser zur Verfügung stellen.

Danke!