101.尚硅谷_HTML&CSS基础_页面练习-修改bug.avi原创

你的页面呢，实际上已经写完了，但是注意了们写完了以后不要说就是诶马上就给他就就就以为写完了是吧，我们还要仔细的去看一下，尤其是我们底边在哪，实际上诶在IE6里边，它可能并不是那么的完美啊，并不是那么完美，比如说我们来打开我们这个IE6，我们来看一下这块啊，一刷新那这块可能刚才咱们没太我没太注意是吧，刚才我一看，我发现这块他是不是进去一块啊，诶他进去一块，而在我们火狐里，他是不是贴着这个这个线的呀，而在我们IE6里呢，它却往里进了一块，那这个东西其实呢，你要不仔细瞅的话，其实看不出来是吧？诶但是我们发现了这个问题，这个问题我们是不是需要去处理一下啊，哎，需要处理一下，那这问题它是什么原因呢？那这个东西肯定是我们IE6对某些样式渲染，它是不是出了一些问题啊，也就说IE6对我们这个按钮的某些样式渲染的时候呢，可能跟我们其他的浏览器它不一样，所以导致我们这个东西是不是缩进去了，哎缩进去了，那所以这里边我们就干。

好了，我们需要去采取一个传统方式，我们需要干嘛呢？排除法怎么排除呢？我们来看看我们这个button相关的样式，有谁button相关的样式我们来找到啊，找到我们这个button button button button button。Button是不是在这儿呢呀，诶BN相关样式都在这里边呢，所以我们这个按钮之所以会出现这个问题，肯定是这里边某一个样式之一，诶某一个样式之一干嘛呢？我们IE6渲染的时候是不是出问题了，那我们这块怎么去排除啊，我们怎么知道是哪个样式的问题呀，现在来看哪个都有可能是吧，我怎么看是哪个问题啊，怎么看一个一个是对吧？哎，我先把这个什么呀科字删了，删了以后我来看一刷新没变化吧？哎，所以这块是不是就不是科字的问题了呀？哎，那这里边我们只能是不是一个一个去一个个去排了呀，哎，一个去排了啊，所以这么做呢，它很麻烦啊，很麻烦，关键是在于哪啊，在于我们这个IE6它没有一些什么呀，调试工具来让我们去调试，我们这块只能一个一个去测试，那或者也可以干嘛呢？也可以这样啊，来我们来打开我们的什么呀，IE浏览器，IE11打开以后是这样的，然后F12，那我们说了我可以用IE11。

模拟一下我们这个老版本的IE啊，但是问题来了，能不能模拟IE6啊，哎，是不是最低到五最高然后就到七了呀，哎，五我们没用啊，不用模拟五，五没人用了啊，都老古董了，那所以我们来看看七有没有这个问题，如果七有这个问题，我们是不是就可以用IE这个调试工具来调试了，来来，选中七往下看。是不是七有也有这问题啊，哎，所以七既然也存在这个问题，我们直接通过七这个IE去调试就行了，如果七没有问题干嘛呀，像我刚才那样，我把这个样式删了，我看它好不好，一个一个去测能理解吧，哎，一个去测啊就比较麻烦了，好，那我们来看看，那打开我们这一，我们来看怎么测怎么调这块啊，怎么调这块还是先选中我们出问题的元素，是不是有这个B填呀，一选中它，我们来看这里边就把你所有的B填里边样式都给你列出来了，哎，我们要看是哪个样式出的问题，那怎么看呢？诶你看前面是不是一个勾啊，有勾表示我这个样式正在生效啊，正在生效，那比如说这C，我把这勾一点了，这样式干嘛了，是不是没用了呀，你再移入还变吗？哎，不变了，所以你一点上以后，它是不是又回来了，哎，那我可以通过这种方式来快速的测试是不是哪个样式问题啊，哎，我来看个外，外呢，没变化吧，咱们主要看这个位置啊，位置是不是没有变化呀，哎，那不是外的问题来看谁呢？He。

是不是也不是问题啊，主要看这个位置动不动啊，它大小了应该是正常的，背景呢，这肯定没事了，对吧？哎，背景肯定没事儿，这一个包ER给它取消了，这就应该取消了，哎，这应该也不是pading呢，Pading没变化吧，还有一个marin marin1走呢，就是不是上去了，但是上去你注意左右是不是也是没动啊，所以marin也不是color，这个不用测了，Color没啥问题是吧？然后这个放也不用了是吧，这个tline这个文字的一个居中左对题没关系吧，哎，再看我们这个，诶那不用测了，是不是就剩他了呀，要不是他咱们这事还麻烦了是吧，那不是他这事还麻烦了，我一点走你。

走，你。走你，诶是不是就是他呀，你会发现当我把这个样式一取消了以后，它是不是回的了呀，当我一点上以后，你会发现什么呢？不仅仅文字动了，连我这个button是不是一起动了呀？诶连我这个BUTTON1起动了，那这个问题我们找到了，这个关键问题是不是在我们这个tank in invent呀，它的一个首行缩进导致我们这个按钮是不是一块移动了呀，那注意了，这个东西对于我们前边的按钮有没有影响，前边按钮是不是没有影响啊，只有什么呀，只影响到了我们这个第三个按钮，这个问题我们要怎么处理，首先咱们这个东西我们找到这个原因了，找到原因了我们要处理怎么处理，也就是说我首行缩进以后，是不是导致我们这个按钮和我们这个文本一块缩进了，那我这一想，也就是说实际上按钮是不是也移动了。

E，哎，那按钮向右移动了一，我这一想，那你向右移动了一干嘛呢？我给你移回来行不行啊？哎，我向左再给你移动，移M是不是你向右移移M，向左再移1M是不跟没移动一样啊？哎，没移动一样，我们来试试行不行啊，那怎么向左移动啊，是不是负的marin值啊，诶我们来一个margin left我要移动me是不是向右移动啊，我要来一什么呀？负的是不是向左移了？哎来咱们开玩笑果我这一刷新走你是不是就回来了？哎，然后再看我们这216啊，看我们816，我这一刷新走你是不是回来了，但是问题又来了，这仨是不是，这俩是不是也动了呀？而这俩用不用动啊，我是不是只需要动最后一个呀？诶所以这个向右移动，向左移动呢？我不能在这儿写，我得干嘛呀，我是不是单独给最右边那个设置啊，哎，来咱们在下边，我们这个最右边这个叫做一个N。

U啊，在nu这来设置，直接来一个点一个nu，下边一个点一个B填，然后一设置保存再来刷新，从你是不是就回来了，哎，就回来了啊，然后但是呢，你再看其他的浏览器走，你火狐是不是出来了，哎，还是这个东西我们是不是只需要对我们这个IE6生效，来来加一个下划线，这回I7我们说我们就没想兼容I7是吧，因为我们一直就没有兼容I7，我们通过IE7就是来调试一下我们这个I6啊，I7的市场占有率比I6现在还小是吧？诶所以没必要去整它了啊来我这一刷新是不是就回去了，那就回去了啊，所以还是最终通过我们这么一个诶hick的形式来解决了这个问题啊，所以你要知道怎么去测，就是说白了就是以什么呀排除法，把所有的问题干嘛呀，所有可疑的东西都排除一个，最后我们就能干嘛，排出那个出问题那个样式啊，出问题那个样式好，这是一个问题，然后呢，基本上看上去就可以了，是吧，但是你要注意了啊，你要细心点来看。

来咱们看我们这个火狐，火狐呢，我们最后这有一个copy copyright，我们这个div的边界基本上在这个位置是吧，诶这个呢，文字是在这块一点来看我们的I6IE6。I16这距离好像是不是有点大呀，诶咱们来看看啊，这样啊，我们看清楚一点，我给谁呢？我给这个W，我给他设置一个这个背景啊，背景颜色来一个什么呢？来一个这个井号FF0设一黄色背景，我这一刷新走你诶现在来看到这个边界，咱们量一下啊，在我们这个火狐里这段距离是一个。22，我记得设置的应该是23是吧？哎，设置是一个23，距离是23，但是来看看我们这个IE6I6，我这一刷新I6呢，我们这一刷新，诶这块没拖出来呢。

还是放大一点。哎呦，是不是46啊，哎，这个距离明显是不是要要大呀，还就说在IE6里边这个距离比我们这个火狐狸要大，大了多少，是不是两倍啊，哎，大了一倍是吧？哎，它是我们那个火狐里边那个两倍，我火狐狸是23，而这我显示的是一个什么呀，46，诶那这个东西当然你如果不经意，实际上是是看不见的是吧？诶那现在我们发现这个问题，那我们来说一下这是什么问题啊来，那这里边为了说明这个问题啊，我们在这儿来新建一个文件，我们就叫一个这个DEMO啊，我们写这么一个文件，那这来干嘛呢？我写一个div，点一个BOX1，然后我们来给它设置一个样式，直接来一个什么呢？是BI，点一个BOX1，然后我来一个white，来一个一个像素，来一个100个像素background color，来一个这个red，一个红色的什么呀，正方形对吧？诶红色正方形，打开我们那个火狐，诶红色正方形。

没问题吧，好，那接下来呢，我们这样为了看清楚一点啊，我来一个这个星号MARIN0PA定零，清除它的这个什么呀，默认样式是不是贴过去了，好，那现在干嘛呢？我来给他一个margin left，我来一个100个像素，我是不是让我们这个BOXS1距离，我们这个bodyy是不是100个像素啊，诶那我这个效果应该什么呀，这个BOX1整个是不是往右移动100个呀？哎，来，我一刷新是不是过来了，哎过来了，来咱们看看我们的IE6。粘过来走你，诶这也没问题吧，诶基本上和我们这个火狐狸是一致的，对吧？诶一致的，但是注意了，我这来一什么呢？诶咱们在这来一个这个float来一个来干嘛呢？我是不是向左浮动啊，诶向左浮动来我们这一刷新走你，那你说在火狐狸它应应应不应该变化，是不应该变呀，本来是是在最左边的呀，哎来我这一刷新没有任何的什么呀，变化啊，没有任何的变化，来看816，我这一刷新走你。

哎哟，是不是距离变大了，哎，距离变大了，我们还是简单量一下，我们这个火狐里从边上去量一下。是正好100啊，哎，正好100来，再看我们这个艾叶，艾叶六也是从边上一流。是不是200啊，诶200这是为什么呢？诶这个我们来说一下，这是我们这个IE6的一个这个bug叫什么呢？这是我们这个IE6的一个双倍编距bug啊，是我们这个IE6的双倍编剧bug，诶什么叫双倍边距啊，我们已经看到结果了，是不是这个marin live的100在我们的这个IE6里显示的效果实际上是什么呀？是不是200个像素啊，哎，实际上是200个像素啊，这就是我们IE6的一个双倍边距表，我们来说一下这个bug产生的一个原因，当什么呢？在我们这个IE6中，哎，当为一个什么呀？为一个这个向左浮动的这个元素设置什么呢？设置我们这个左外边距或者什么呢？或者为一个这个向右哎浮动的这个元素设置。

什么呀，设置右外边距时啊，向左浮动元素设置左边距，向右浮动的元素设置右边距时我们说什么呢？此时这个什么呀，Y边距将会什么呢？将会是我们这个哎设置值的什么呀，二倍啊，将会是设我们设置这个值的二倍什么意思？Margin left，我是不是设了一个向左浮动啊，而且同时我又给它设置一什么呀，左外边距，此时我们的ID浏览器会将我这个左外边距渲染为多少呢？渲染为我们设置值啊二倍，说白了就是显示为什么呀，显示为200，而我这如果设置是一个float，一个什么呀，Right，而我这设置一个marin right，那干嘛呀？我那个右外边距会渲染个什么呀，两倍，那我们说了是不是跟我们这个练习这个情况是一样的呀，现在我们这个copyright是不是向右浮动啊，而这个距离是不是就是我们设置那个距离的一个两倍呀，哎，两倍啊，这就是我们这个双倍边距的一个。

Bug诶那说完这个问题了，那这个问题关键是我们是不是得解决呀，我怎么解决呀，既然你设置的是两倍，我干脆干嘛呀，哎，我给你对付一下你，我来什么呀，来个50是不行的呀，哎来个五十来我这一刷新是不是正好100啊，哎双倍咱们对付一下他，但是这招呢。

它不好，我是不是还得用我们这个hi呀，诶还得用我们这个hi专门来对付这个I6，而且干嘛呀，我每次改，我是不是还得想着改它呀，诶还得想着改它，所以这招呢行，但是呢，它不太好，不太好还可以怎么办呢？来那我们可以在这儿给它添加一个什么呢？可以添加一个这个样式来解决我们这个艾叶六的一个双倍边距问题，添加一个什么样式呢？直接来一个叫做一个display，来一个in来哎咱们先啊不写它啊，先不写它保存。我这回过头来一刷新走，你现在是不是还双倍啊，诶，然后我加一个第一次play一个什么呀，In烂保存，我们来看效果，这里边一刷新是不是就回去了，哎就回去了啊，所以注意加一个display inline就可以解决我们这个I6的一个双倍边距问题，那我们说了阴line什么意思呀，是不是将我们这个元素设置为这个行内元素，但是你要注意了，现在我们这元素干嘛了？

是不是已经浮动了呀，那我们说了浮动以后，他说自然就变成快元素了，哎你这还设置航天元素，但是这所以说这个属性有没有意义啊，没有意义啊没有意义，所以这里边说什么呢？对于什么呢？对于一个浮动元素来说，设置我们这个DC play叫什么呀？音赖没有什么呀，诶没有任何意义，说白了跟设置跟不设置干嘛呀一样，但是什么呢？诶该属性可以解决我们什么呀，解决我们这个艾叶六的一个，诶双倍边距问题，诶为什么为什么呢？我也没研究啊，没我也没研究就知道是吧，这么去解决阿中去解决你可以理解为什么呀，我用一个bug去解决另一个bug是吧？诶用一个bug去解决另一个bug啊，所以注意以后看到这个问题你就记住了，给我们这个元素加上一个display，一个inline就OK了，啊，Display inline就OK了，好，那回到我们刚才这个问题，那我们注意到问题的根源在哪了，那现在。

但我们已经看到了，在IE6里边，我实际上这个右边距是是比较大一点啊，那我怎么办？我是不是给这个copyright这个P元素，给它加上一个display赖是不是行了呀，哎，Display赖来找到我们的这个CSS copy是不是跟这的呀，哎，来在这来一个display音来诶这里边我们来说一下，这是处理我们这个双倍边距的这个啊来保存这里边我们再来看我们的这个IE61刷新，嗯，走你是不是就回去了，哎，就回去了啊这样还有什么呢，对于其他浏览器来说也没有任何的影响啊，也没有任何的影响，好，那这个问题呢，我们就给它处理完了啊，处理完了这种颜色给它去掉，好，那现在呢，我们整个这个网页才算是给它。嗯，做完了啊，他算给他做完了，好，那这里边儿呢，我们就相当于说补充了两个问题啊，来听一下。