Canvas copre pagina in Internet Explorer

sto centrando la mia tela utilizzando questo codice:Canvas copre pagina in Internet Explorer

position:absolute; 
top:50%; 
left:50%; 
margin-top:-200px; /* Half of canvas height */ 
margin-left:-275px; /* Half of canvas width */

funziona perfettamente in tutti i browser tranne che per IE9 e 10. In Internet Explorer, che copre l'intera pagina. È possibile supportare il centraggio della tela in IE?

fonte

2013-05-24 user1431627

stata specificata una larghezza in CSS come bene? –

@BramVanroy No? – user1431627

@Pete http://pastebin.com/wMz33J5Q – user1431627

centraggio utilizzando margin: 0 auto; con display: block; opere in quasi tutti i browser - quelli che sostengono <canvas> di sicuro.

vivo esempio: http://jsbin.com/ovoziv/2

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Centring Canvas</title> 
</head> 
<body> 

    <canvas></canvas> 

</body> 
</html>

CSS

canvas { 
    display: block; 
    background: #FFFFB7; 
    width: 550px; 
    height: 400px; 
    margin: 0 auto; 
}

EDIT: Aggiornato risposta a centrare verticalmente troppo. Questo CSS farà il trucco:

canvas { 
    background-color: #FFFFB7; 
    width: 550px; 
    height: 400px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -275px; 
    margin-top: -200px; 
}

Ora la spiegazione. Per prima cosa posizioniamo la tela con il 50% di offset dal lato superiore e sinistro usando position: absolute impostando top e left a 50%. Quindi, poiché la tua tela ha una dimensione statica, aggiungiamo un margine negativo (che non dovresti mai fare quando l'elemento non è posizionato in modo assoluto) per metà della larghezza e della dimensione (550x400/2 = 275x200): margin-left: -275px; margin-top: -200px;.

La tela verrà ora visualizzata al centro dello schermo. Se lo fai all'interno di un altro elemento e vuoi centrarlo, prova ad aggiungere position: relative; a quell'elemento, quindi userà i suoi limiti anziché quelli del corpo.

vivo esempio qui: http://jsbin.com/ovoziv/6

fonte

2013-05-27 11:18:29 Broxzier

Ma non è centrato verticalmente, ma solo orizzontale. – user1431627

@ user1431627 Ho aggiornato la mia risposta. È fondamentalmente il tuo codice, ma sembra funzionare comunque .. – Broxzier

Ho capito il problema. Le impostazioni di IE erano impostate per ingrandire l'intera pagina. Embargasing: P – user1431627

Canvas copre pagina in Internet Explorer

risposta

Problemi correlati