ie css bug系列：表单控件双边距bug -m6米乐app登录

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'>m6米乐安卓版下载的解决方案</h3><p>下面是按照m6米乐安卓版下载的解决方案类型排序的对上述问题的m6米乐安卓版下载的解决方案。</p><p>m6米乐安卓版下载的解决方案(条件注释m6米乐安卓版下载的解决方案)</p><p><strong>m6米乐安卓版下载的解决方案日期</strong></p><p>2009-08-17 22:37:49 星期一</p><p><strong>修复版本</strong></p><p>所有受影响版本</p><p><strong>描述</strong></p><p>对于本 bug 的修复是一个相当暴力直接的m6米乐安卓版下载的解决方案。让我们一起看一下：修复后的实例在一个 <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.     

让我们来分解一下我在这里的解决办法。这个是迄今为止我发现的唯一一个m6米乐安卓版下载的解决方案。我通过使用条件注释来针对 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">m6米乐app登录 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">