ie css bug系列：表单控件双边距bug -亚博电竞官方网址

css 代码：

1. div {
2.     margin-left: 100px;
3.     width: 100%; /* gives “layout” */
4. }

现在，我们有一个拥有布局并且设置了 margin-left 属性的父节点。在 ie6 与 ie7 中， 和 元素的表现看起来就好像它们从父节点 <div> 那里继承了 margin 属性一样，这样它们的 margin 属性的值就是双重叠加的。在父节点上设置 margin-right 属性结果也是一样的。在功能更健全的浏览器中，<input> 和 <textarea> 元素在垂直方向上应该和 <select> 对齐。</p><p> </p><h3 id='pk-menu-0'>亚博电竞官方网址的解决方案</h3><p>下面是按照亚博电竞官方网址的解决方案类型排序的对上述问题的亚博电竞官方网址的解决方案。</p><p>亚博电竞官方网址的解决方案(条件注释亚博电竞官方网址的解决方案)</p><p><strong>亚博电竞官方网址的解决方案日期</strong></p><p>2009-08-17 22:37:49 星期一</p><p><strong>修复版本</strong></p><p>所有受影响版本</p><p><strong>描述</strong></p><p>对于本 bug 的修复是一个相当暴力直接的亚博电竞官方网址的解决方案。让我们一起看一下：修复后的实例在一个 <a href="http://haslayout.net/demos/form-control-double-margin-bug-fixed-demo.html" target="_blank" rel="nofollow"> 单独页面 </a> 上。</p><p>html 代码:</p><ol><li><form action=””></li><li><div></li><li>    <input type=”text” name=”ber”></li><li>    <textarea cols=”10″ rows=”5″ name=”baz”>

css 代码:

1. div {
2.     margin-left: 100px;
3.     width: 100%; /* gives “layout” */
4. }

条件注释代码：

2.     
3.         input,
4.         textarea {
5.             margin-left: -100px;
6.         }
7.     

让我们来分解一下我在这里的解决办法。这个是迄今为止我发现的唯一一个亚博电竞官方网址的解决方案。我通过使用条件注释来针对 ie6 和 ie7 做了处理，您也可以选择任 何您喜欢的方式来达成这个目标。对于这些特定版本的 ie 浏览器，我为 和 设置了与父节点中的 margin-left 属性值大小相等，符号相反的 margin-left 值。现在，在受该 bug 影响浏览器中，所有的元素都像他们应该表现的那样，与 <select> 元素在垂直方向对齐。该方案对于 margin-right 来说同样适用。</p><p>注释：你可以直接使用我在 css 里定义的选择条件，这不算恶意侵权。要确保修正其中 margin 的负数，把它只应用到和这个 bug 相关的表单元素中。</p><p>原文链接：<a href="http://haslayout.net/css/form-control-double-margin-bug" target="_blank" rel="nofollow">http://haslayout.net/css/form-control-double-margin-bug</a></p> <div class="wbp-cbm-magicpost"><div class="dwqr-inner"></div></div> </div> <div class="t-separator c-sub t-sm mt30">正文完</div> <div class="post-foot-qrcode"> <div class="title"></div> <img src="https://www.iseeyu.com/wp-content/uploads/2023/02/1677477273-ewm.jpg" alt="post-qrcode"> </div> <div class="footer-info puock-text mt20"> <div class="mt20 tags"><a href="https://www.iseeyu.com/tag/wangyeqianduan/" class="pk-badge pk-badge-sm mr5 mb10"><i class="fa-solid fa-tag"></i> 网页前端</a></div> <div class="p-flex-sbc mt20 t-sm"> <div> <span>发表至：</span><a class=" mr5" href="https://www.iseeyu.com/jianzhan/"><i class="fa-regular fa-folder-open"></i> 网站建设</a> </div> <div> <span class="c-sub"><i class="fa-regular fa-clock"></i> 2013-10-31</span> </div> </div> </div> </div> <div class="mt15 post-action-panel"> <div class="post-action-content"> <div class="d-flex justify-content-center w-100 c-sub"> <div class="circle-button puock-bg text-center " id="post-like" data-id="727"> <i class="fa-regular fa-thumbs-up t-md"></i> <span class="t-sm"></span></div> <div class="circle-button puock-bg text-center pk-modal-toggle" title="海报" data-no-title data-no-padding data-once-load="true" data-url="https://www.iseeyu.com/wp-admin/admin-ajax.php?action=pk_poster&id=727" ><i class="fa-regular fa-images"></i></div> <div class="circle-button puock-bg text-center pk-modal-toggle" title="分享" data-once-load="true" data-url="https://www.iseeyu.com/wp-admin/admin-ajax.php?action=pk_ajax_dialog_post_share&id=727"> <i class="fa fa-share-from-square t-md"></i></div> <div class="ls"> <div class="circle-button puock-bg text-center post-menu-toggle post-menus-box"><i class="fa fa-bars t-md"></i></div> </div> </div> </div></div> </div> <div class="p-block p-flex-sc"> <div class="mr-3 p-flex-sk-0"> <img class="md-avatar mt-1" src="https://cn.gravatar.com/avatar/cb2745e70653e56ffbb38cccf5310795?s=96&d=identicon&r=r" alt="网站建设" title="网站建设"> </div> <div class="puock-text t-md"> <div> <span class="font-weight-bold">亚博电竞官方网址 copyright notice: </span><span>our original article, by </span> <a class="a-link" href="https://www.iseeyu.com/author/kxccc/">网站建设 </a>2013-10-31 publish, total 1652 words. </div> <div class="mt-2"> <span class="font-weight-bold c-sub">转载说明：</span><span class="c-sub">除特殊说明外本站文章皆由cc-4.0协议发布，转载请注明出处。</span> </div> </div> </div> <div class="p-block pb-0"> <div class="row puock-text post-relevant"> <a href="https://www.iseeyu.com/jianzhan/54291.html" class="col-6 col-md-3 post-relevant-item ww"> <div style="background:"> <div class="title">创造一流的互联网品牌时网站建设扮演重要角色</div> </div> </a> <a href="https://www.iseeyu.com/jianzhan/54276.html" class="col-6 col-md-3 post-relevant-item ww"> <div style="background:"> <div class="title">企业网站建设完之后还需要更新内容么</div> </div> </a> <a href="https://www.iseeyu.com/jianzhan/492.html" class="col-6 col-md-3 post-relevant-item ww"> <div style="background:"> <div class="title">wordpress二次开发：站外以html的形式调用wordpress文章</div> </div> </a> <a href="https://www.iseeyu.com/jianzhan/54689.html" class="col-6 col-md-3 post-relevant-item ww"> <div style="background:"> <div class="title">网站建设在前网络推广在后注意以下4点</div> </div> </a> </div> </div> <div class="p-block p-lf-15"> <div class="row text-center pd-links single-next-or-pre t-md "> <div class="col-6 p-border-r-1 p-0"> <a href="https://www.iseeyu.com/sheji/711.html" rel="prev"><div class='abhl puock-text'><p class='t-line-1'>ps新手教程：变换角度！让你的设计稿更上档次</p><span>上一篇</span></div></a> </div> <div class="col-6 p-0"> <a href="https://www.iseeyu.com/sheji/729.html" rel="next"><div class='abhl puock-text'><p class='t-line-1'>经验分享：让网页设计有规律可循</p><span>下一篇</span></div></a> </div> </div></div> <div class="p-block" id="comments"> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa-regular fa-comments mr-1"></i>comment（no comments）</span> </div> <div class="mt20 clearfix" id="comment-form-box"> <form class="mt10" id="comment-form" method="post" action="https://www.iseeyu.com/wp-admin/admin-ajax.php?action=comment_ajax"> <div class="form-group"> <textarea placeholder="the world is so big and express your opinion~" id="comment" name="comment" class="form-control form-control-sm t-sm" rows="4">