J'ai un </ code> qui doit s'inscrire dans un espace dont la taille n'est pas prédéterminée (est un pourcentage de la taille de l'écran). Je peux obtenir de bons résultats si Firefox en définissant les propriétés CSS régulières: <pré> xxx </ pré> <p> Cependant, dans IE 6 et 7, je reçois des résultats différents et étranges. Dans IE6, la zone de texte semble avoir un rembourrage à la fois à gauche et à droite, poussant la taille de mon conteneur à pousser. Dans IE7, la zone de texte a un rembourrage à gauche, mais ne rend pas la taille du récipient à pousser - au lieu de cela, son bord droit pousse à l'extérieur du conteneur. </ P> <p> Le réglage de la hauteur semble avoir aucun effet dans l'IE6 ou IE7; Le <code> <textarea> </ code> est 2 rangs longs dans les deux cas, ignorant la hauteur: la directive 100%. </ p> <p> existe un moyen cohérent de former un <code> <textarea> </ Code> à travers les navigateurs? </ P> <p> est là un moyen de se débarrasser du rembourrage à gauche du <code> <textarea> </ code>? </ p> <HR> <H3> Mise à jour <H3> / h3> <p> Utilisation de <code> Position: absolu </ code> supprime le rembourrage, mais la largeur <code>: 100% </ code> est toujours vêtue. IE7 semble calculer la largeur de 100% pour être trop volumineuse, ce qui entraîne un <code> <textarea> </ code> qui dépasse du <code> <div> </ code> qui le contient. </ P> < P> Je vais créer un exemple autonome si je reçois une chance ... </ p> </ p> </div> <!-- tags --> <div class="d-flex mt-1"> <div class=""> <a class="badge badge-info" href="/tag/css">css</a> <a class="badge badge-info" href="/tag/cross-browser">cross-browser</a> <a class="badge badge-info" href="/tag/textarea">textarea</a> </div> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">2 commentaires</small> <div class="comments mt-3"> <p><a href="http://jsfiddle.net/eric/hemu6/" rel="nofollow Noreferrer"> exemple autonome </a></p> <hr> <p>Parand: Avez-vous déjà trouvé une réponse à cela? Ceci est une question de 2 ans et demi et plus de 4 000 vues. Quelqu'un doit connaître une bonne façon correcte de prendre soin de cela?</p> <hr> </div> </div> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="2186005983" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <!-- Answers --> <p class="mt-4 font-weight-bold">5 Réponses :</p> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Il peut y avoir une solution Sneaky CSS pour y parvenir que je ne connais pas, mais dans mon expérience, c'est l'une des choses où l'utilisation d'un peu de JavaScript est justifiée. <P> Vous pouvez obtenir la hauteur dont vous avez besoin. (de la fenêtre actuelle que je présume) en utilisant jQuery ou prototype, ou en pure JavaScript: <a href="http://www.howtocree.co.uk/tatudials/javascript/browserwindow" rel="nofollow Noreferrer"> Obtenez le Hauteur du document actuel </a> puis </ p> <pré> xxx </ pré> <p> Le rembourrage de la main gauche Je trouve étrange, cependant. Pouvez-vous poster un exemple? </ P> </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> J'ai vu ce problème avec Asp.net Textbox Controls également dans IE7. Je ne me souviens pas d'où j'ai trouvé une solution (mais des accessoires à la personne qui l'ont trouvée), mais j'avais le même problème où la zone de texte avec largeur = "100%" briserait réellement le DOM et toute ma section de contenu " déversement "sur une section voisine (comme une navigation basée sur une table). <p> La solution que j'ai finalement adoptée consistait à envelopper l'ASP: zone de texte à l'intérieur de sa propre table et définissez la "mise en page de la table: fixe; largeur: 100%" propriété et sur la zone de texte / textarea ": relatif; Largeur: 100% ; " Donc, le bloc ressemblerait à ceci: </ p> <pré> xxx </ pré> <p> Ce n'est pas la plus jolie solution, mais j'ai vérifié qu'il fonctionne de travail à tous les navigateurs. J'ai une rémunération sur ce numéro <a href = "http://shawnyale.com/blog/post/2010/08/09/ie7-bug-aspnet-textbox-width3d10025-caus-the-Component-a- Spill-Hors-Out-of-STI-Contener.aspx "rel =" Nofollow NOREFERRER "> ICI </a>. </ P> <p> J'espère que cela a aidé. </ P> </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">4 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> <b> -1 </ b> n'est-ce pas une "zone de texte asp.net"? Cela ne générait-il pas simplement un <code> <textarea> </ code> dans la page HTML? En outre, n'est-ce pas un cas parfait de quand il est <B> totalement erroné </ b> d'utiliser un <code> <table> </ code>? </p> <hr> <p class="answer-comment"> La zone Textbox ASP.NET est une <entrée> sur la page pas un <textarea>. </p> <hr> <p class="answer-comment"> @Shawn: Eh bien, <code> <asp: textbox textmode = "MULLINE" /> </ CODE> Render un HTML <code> <textarea> </ code> qui est ce que je pense avoir été signifié. </p> <hr> <p class="answer-comment"> @Mufasa: solution à quoi? Envelopper la zone de texte dans une table vide doit avoir <i> aucun effet quelconque </ i>! </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Afin de résoudre ce genre de problèmes, il faut réfléchir à la manière dont le pourcentage est traité dans le navigateur. Tout d'abord .... Les pourcentages n'existent pas, ils sont convertis en pixels à un moment donné. Les étapes sont 1) Le navigateur rend toutes les balises, 2) Navigateur mesure les boîtes extérieures, parent, de taille moyenne pour obtenir sa taille en pixels et définit la taille des boîtes enfants en fonction de leur pourcentage de taille. Je pense que la première chose à vérifier est la taille de la boîte mère de Textarea et une boîte parente, etc. Cela peut être fait en vérifiant les informations "mise en page" dans la barre d'outils Firebug et de développeur, et découvrez ce qui est mesuré différemment dans les deux navigateurs. Une fois que vous avez trouvé cet élément (ou des elèmes) CSS peut être ajusté pour les considérer. </ P> <P> N'oubliez pas que le dimensionnement en pourcentage considère la largeur et la hauteur du contenu de la boîte parente pour former l'élément enfant et non le rembourrage. Donc, si une largeur de boîte parente est de 500px et comporte 100 px remplissage, un élément enfant avec une largeur de 100% sera de 500px et le remplissage de 100 px sera entouré et les deux éléments prendront 700px de votre écran. </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> essayer </ p> <p> Ajout d'une hauteur minute: 100% sur la zone de texte CSS. Sur la DIV contenant l'absolu positionné, définissez la position sur la relative sur votre CSS. </ P> <p> Utilisez également des DOCTYPES transistionnaires au lieu de strict, tandis que vous. Assurez-vous qu'il n'y a pas de tags non exempts. Je serais préférable que vous puissiez faire la page XHTML ou HTML standard conforme afin que vous ayez moins de problèmes avec la compatibilité croisée croisée. </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Essayez d'ajouter <code> Affichage: Bloquer </ CODE> et <code> Bordure: 0 </ code> à votre <code> #text_area </ code>. Les premiers devraient s'occuper de la question de la hauteur et de ce dernier empêche la largeur <code>: 100% </ code> se répandue. </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/le-bootstrap-de-twitter-a-t-il-des-classes-utilitaires-de-taille-de-police" class=""> Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? </a> <hr> <a href="/question/mettez-en-surbrillance-l-39-eacute-l-eacute-ment-d-39-eacute-tiquette-apr-egrave-s-avoir-cliqu-eacute-sur-la-case-agrave-cocher" class=""> Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher </a> <hr> <a href="/question/changer-la-direction-de-d-eacute-filement-de-la-page-web-sur-la-version-mobile" class=""> Changer la direction de défilement de la page Web sur la version mobile </a> <hr> <a href="/question/target-first-child-css-styled-components" class=""> Target first-child css styled-components </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a> with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>
</ code> qui doit s'inscrire dans un espace dont la taille n'est pas prédéterminée (est un pourcentage de la taille de l'écran). Je peux obtenir de bons résultats si Firefox en définissant les propriétés CSS régulières: <pré> xxx </ pré> <p> Cependant, dans IE 6 et 7, je reçois des résultats différents et étranges. Dans IE6, la zone de texte semble avoir un rembourrage à la fois à gauche et à droite, poussant la taille de mon conteneur à pousser. Dans IE7, la zone de texte a un rembourrage à gauche, mais ne rend pas la taille du récipient à pousser - au lieu de cela, son bord droit pousse à l'extérieur du conteneur. </ P> <p> Le réglage de la hauteur semble avoir aucun effet dans l'IE6 ou IE7; Le <code> <textarea> </ code> est 2 rangs longs dans les deux cas, ignorant la hauteur: la directive 100%. </ p> <p> existe un moyen cohérent de former un <code> <textarea> </ Code> à travers les navigateurs? </ P> <p> est là un moyen de se débarrasser du rembourrage à gauche du <code> <textarea> </ code>? </ p> <HR> <H3> Mise à jour <H3> / h3> <p> Utilisation de <code> Position: absolu </ code> supprime le rembourrage, mais la largeur <code>: 100% </ code> est toujours vêtue. IE7 semble calculer la largeur de 100% pour être trop volumineuse, ce qui entraîne un <code> <textarea> </ code> qui dépasse du <code> <div> </ code> qui le contient. </ P> < P> Je vais créer un exemple autonome si je reçois une chance ... </ p> </ p> </div> <!-- tags --> <div class="d-flex mt-1"> <div class=""> <a class="badge badge-info" href="/tag/css">css</a> <a class="badge badge-info" href="/tag/cross-browser">cross-browser</a> <a class="badge badge-info" href="/tag/textarea">textarea</a> </div> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">2 commentaires</small> <div class="comments mt-3"> <p><a href="http://jsfiddle.net/eric/hemu6/" rel="nofollow Noreferrer"> exemple autonome </a></p> <hr> <p>Parand: Avez-vous déjà trouvé une réponse à cela? Ceci est une question de 2 ans et demi et plus de 4 000 vues. Quelqu'un doit connaître une bonne façon correcte de prendre soin de cela?</p> <hr> </div> </div> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="2186005983" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <!-- Answers --> <p class="mt-4 font-weight-bold">5 Réponses :</p> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Il peut y avoir une solution Sneaky CSS pour y parvenir que je ne connais pas, mais dans mon expérience, c'est l'une des choses où l'utilisation d'un peu de JavaScript est justifiée. <P> Vous pouvez obtenir la hauteur dont vous avez besoin. (de la fenêtre actuelle que je présume) en utilisant jQuery ou prototype, ou en pure JavaScript: <a href="http://www.howtocree.co.uk/tatudials/javascript/browserwindow" rel="nofollow Noreferrer"> Obtenez le Hauteur du document actuel </a> puis </ p> <pré> xxx </ pré> <p> Le rembourrage de la main gauche Je trouve étrange, cependant. Pouvez-vous poster un exemple? </ P> </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> J'ai vu ce problème avec Asp.net Textbox Controls également dans IE7. Je ne me souviens pas d'où j'ai trouvé une solution (mais des accessoires à la personne qui l'ont trouvée), mais j'avais le même problème où la zone de texte avec largeur = "100%" briserait réellement le DOM et toute ma section de contenu " déversement "sur une section voisine (comme une navigation basée sur une table). <p> La solution que j'ai finalement adoptée consistait à envelopper l'ASP: zone de texte à l'intérieur de sa propre table et définissez la "mise en page de la table: fixe; largeur: 100%" propriété et sur la zone de texte / textarea ": relatif; Largeur: 100% ; " Donc, le bloc ressemblerait à ceci: </ p> <pré> xxx </ pré> <p> Ce n'est pas la plus jolie solution, mais j'ai vérifié qu'il fonctionne de travail à tous les navigateurs. J'ai une rémunération sur ce numéro <a href = "http://shawnyale.com/blog/post/2010/08/09/ie7-bug-aspnet-textbox-width3d10025-caus-the-Component-a- Spill-Hors-Out-of-STI-Contener.aspx "rel =" Nofollow NOREFERRER "> ICI </a>. </ P> <p> J'espère que cela a aidé. </ P> </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">4 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> <b> -1 </ b> n'est-ce pas une "zone de texte asp.net"? Cela ne générait-il pas simplement un <code> <textarea> </ code> dans la page HTML? En outre, n'est-ce pas un cas parfait de quand il est <B> totalement erroné </ b> d'utiliser un <code> <table> </ code>? </p> <hr> <p class="answer-comment"> La zone Textbox ASP.NET est une <entrée> sur la page pas un <textarea>. </p> <hr> <p class="answer-comment"> @Shawn: Eh bien, <code> <asp: textbox textmode = "MULLINE" /> </ CODE> Render un HTML <code> <textarea> </ code> qui est ce que je pense avoir été signifié. </p> <hr> <p class="answer-comment"> @Mufasa: solution à quoi? Envelopper la zone de texte dans une table vide doit avoir <i> aucun effet quelconque </ i>! </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Afin de résoudre ce genre de problèmes, il faut réfléchir à la manière dont le pourcentage est traité dans le navigateur. Tout d'abord .... Les pourcentages n'existent pas, ils sont convertis en pixels à un moment donné. Les étapes sont 1) Le navigateur rend toutes les balises, 2) Navigateur mesure les boîtes extérieures, parent, de taille moyenne pour obtenir sa taille en pixels et définit la taille des boîtes enfants en fonction de leur pourcentage de taille. Je pense que la première chose à vérifier est la taille de la boîte mère de Textarea et une boîte parente, etc. Cela peut être fait en vérifiant les informations "mise en page" dans la barre d'outils Firebug et de développeur, et découvrez ce qui est mesuré différemment dans les deux navigateurs. Une fois que vous avez trouvé cet élément (ou des elèmes) CSS peut être ajusté pour les considérer. </ P> <P> N'oubliez pas que le dimensionnement en pourcentage considère la largeur et la hauteur du contenu de la boîte parente pour former l'élément enfant et non le rembourrage. Donc, si une largeur de boîte parente est de 500px et comporte 100 px remplissage, un élément enfant avec une largeur de 100% sera de 500px et le remplissage de 100 px sera entouré et les deux éléments prendront 700px de votre écran. </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> essayer </ p> <p> Ajout d'une hauteur minute: 100% sur la zone de texte CSS. Sur la DIV contenant l'absolu positionné, définissez la position sur la relative sur votre CSS. </ P> <p> Utilisez également des DOCTYPES transistionnaires au lieu de strict, tandis que vous. Assurez-vous qu'il n'y a pas de tags non exempts. Je serais préférable que vous puissiez faire la page XHTML ou HTML standard conforme afin que vous ayez moins de problèmes avec la compatibilité croisée croisée. </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Essayez d'ajouter <code> Affichage: Bloquer </ CODE> et <code> Bordure: 0 </ code> à votre <code> #text_area </ code>. Les premiers devraient s'occuper de la question de la hauteur et de ce dernier empêche la largeur <code>: 100% </ code> se répandue. </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/le-bootstrap-de-twitter-a-t-il-des-classes-utilitaires-de-taille-de-police" class=""> Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? </a> <hr> <a href="/question/mettez-en-surbrillance-l-39-eacute-l-eacute-ment-d-39-eacute-tiquette-apr-egrave-s-avoir-cliqu-eacute-sur-la-case-agrave-cocher" class=""> Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher </a> <hr> <a href="/question/changer-la-direction-de-d-eacute-filement-de-la-page-web-sur-la-version-mobile" class=""> Changer la direction de défilement de la page Web sur la version mobile </a> <hr> <a href="/question/target-first-child-css-styled-components" class=""> Target first-child css styled-components </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a> with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>
