Le Problème:
La Question
Le paragraphe occupera toute la largeur de la page en
- Firefox
- Firefox Mobile (testé avec la version 4.0.3 sur SGS2)
- Chrome
- Chrome Mobile Beta (testé avec la version 4.0.3 sur SGS2)
- Internet Explorer
- Internet Explorer Mobile (testicules avec l'Émulateur Windows Phone)
- Opera Mobile (testé avec la version 4.0.3 sur SGS2)
- Android natif du navigateur (testé avec la version 4.0.3 sur SGS2 et émulateur Android)
Que dois-je faire il en fait de même dans le navigateur Android par défaut?
J'ai essayé:
Veuillez noter que cet exemple est réduit pour montrer le problème que j'ai beaucoup plus d'une page. Je voudrais donc que la solution soit aussi peu perturbateur que possible. Par exemple, le réglage de tous les paragraphes sur mon site à flotteur semble être une mauvaise idée.
width
L'augmentation de la valeur de l' width
de la propriété sur l' p
classe CSS n'a pas d'effet.
Les valeurs relatives: 100%
et 1000%
n'ont aucun effet. Les valeurs <100% d'avoir un effet (paragraphe devient plus mince).
Valeurs absolues: 1000px
ne pas augmenter la largeur, de faibles valeurs de la diminuer si.
float
Lorsque le paramètre float : right;
sur le paragraphe, il s'affiche comme vous le souhaitez:
CSS Reset
Lorsque j'insère ces CSS Reset styles, la largeur de paragraphe n'est pas affectée.
position
Lorsque le paramètre position
de absolute
sur le paragraphe, il s'affichera comme souhaité. Mais je ne suis pas sur si qui serait à l'abri, généralement, ont permis.
La Source:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Android Browser Issue</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
border : 3px dotted green;
margin : 0;
padding: 0;
}
p {
border : 3px solid red;
margin : 0;
padding: 0;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
Vous pouvez le voir ici: http://jsfiddle.net/EYcWL/embedded/result/ ou y aller directement: