武汉北大青鸟 > IT技术教程 > 软件编程教程 >

20个常见Bug及其修正方法

时间:2013-09-14来源:北大青鸟徐东校区

  毫无疑问,一个合理的布局和结构是理想选择。这不是因为你的布局在不同浏览器表现不同,而且还因为的CSS有很多方法来布局你的每个元素。今天,我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。

  1- Bug修正:IE双倍Margin bug

  - 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以,你只是把例如这样的代码:

  #content {

  float: left;

  width: 500px;

  padding: 10px 15px;

  margin-left: 20px; }改为如下代码 :

  #content {

  float: left;

  width: 500px;

  padding: 10px 15px;

  margin-left: 20px;

秒速快3   display:inline;

  }

  

 

  2- 克服盒模型hack

  - 如果你想给任一div指定宽度,不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以,不要这样做:

  #main-div{

  width: 150px;

  border: 5px;

  padding: 20px;

  }这样做:

  #main-div{

  width: 150px;

  }

  #main-div div{

  border: 5px;

  padding: 20px;

  }

  3-IE无视min-height属性

  - min-height属性在firefox下表现很好但是IE却无视了它,IE的height就像FF的min-height.注意:IE7没有这个bug。

秒速快3   /* 对主流浏览器 */

  .container {

秒速快3   width:20em;

  padding:0.5em;

  border:1px solid #000;

  min-height:8em;

  height:auto;

  }

  /* 对IE浏览器 */

  /*\*/

  * html .container {

  height: 8em;

  }

  /**/

  4- Min-Width for IE

  -一个IE的min-width缺陷的修正。

 
  5-块级元素居中

  有很多种方法可以使块级元素居中;选择哪种方法取决于你的百分比大小设置或使用更的数值。

  整个页面内容居中:

  body{

  text-align: center;

  }

  #container

  {

  text-align: left;

  width: 960px;

  margin: 0 auto;

  }

  6-使用CSS垂直对齐

 
 如果你想知道怎么才能正确的实现垂直对齐,只需要简单的为你的文本指定和容器等高的line-height。

秒速快3   #wrapper {

  width:530px;

  height:25px;

  background:url(container.gif) no-repeat left ;

  padding:0px 10px;

  }

  #wrapper p {

  line-height:25px;

  }

  栏目问题

  7- 你的CSS栏目被搞乱的大原因-

  一个容易理解的就如何解决普遍的CSS栏目的问题的有用的图解和代码片断的文章。

  

 

  8- 扩大的盒子Bug-

  当您尝试创建一个两列浮动的布局, IE浏览器将创建一个“浮动下降” ,这是由于在一个固定宽度的浮动DIV内存在超出宽度的内容,这些内容必须融入布局中的一个特定位置。这片文章详述了几种可能的替代方法。

  

 

  CSS 定位

  9- 理解CSS定位Part 1

  -一系列很有趣的文章,这些文章不包括定位,还包括包括定义布局的属性,比如display和float ,和对CSS3 布局模型的一个预览。部分将会介绍定位和display属性。 Part1, Part2, Part3 将会带给你对定位的更深的理解.

  

 

  10- relative和absolute有什么不同?

秒速快3   - 对于刚开始使用CSS的人来说,无论相对行为还是定位都是非常令人沮丧的。这个问题的答案将会让你的迷惑变的清晰些。

秒速快3   #redSquare

  {

  position: relative;

  bottom: 40px;

  right: 40px;

  }

  显示这样:

  

 

  11-HangTab(固定标签)

  - 在浏览器边缘创建一个固定的标签(即使内容居中)。查看Panic’s website for their software Coda.

  #hang_tab {

秒速快3   position: absolute;

  : 7px;

秒速快3   left: 0px;

  width: 157px;

  height: 93px;

  }

  

 

秒速快3   CSS 浮动概念

  12- CSS 浮动原理:你应该知道的事情- SmashingMagazine

  浏览几十个秒速快3相关的文章,并选择了在用float开发基于CSS的布局时你应该牢记的重要东西。

  Some content

  Text not inside the float

  13- Floatutorial: CSS float的简单教程

  - Floatutorial带你查看浮动元素的基本原理,例如图片,下拉菜单,下一个和返回按钮,相册,内部列表和多列布局。

  

 

  14- 清除浮动- 正确的方法

  - 清除浮动可以说是CSS开发中的一个令人沮丧的方面,理想方法之一是在您的网站上使用EasyClearing .

  /* EasyClearing http://www.positioniseverything.net/easyclearing.html */

  #container:after

  {

  content: ".";

秒速快3   display: block;

  height: 0;

  clear: both;

  visibility: hidden;

  }

  #container

  {display: inline-block;}

  /* Hides from IE-mac \*/

秒速快3   * html #container

  {height: 1%;}

秒速快3   #container

  {display: block;}

  /* End hide from IE-mac */

  

 

  更简单的圆角实现15- 迈克询问CSS圆角建议- “简单的方法是使用一个大的gif图片,然后我将给我的盒子编码”

  beautifully-encapsulated paragraph

  “并给它添加背景”

  .roundBox {

  background:transparent url(roundBox.gif) no-repeat left;

  width:340px;

  padding:20px;

  }

  。roundBox 。boxBottom {

  background:white url(roundBox.gif) no-repeat bottom left;

  font-size:1px;

  line-height:1px;

秒速快3   height:14px;

  margin:0 -20px -20px -20px;

秒速快3   }同样 Askthecssguy 介绍了 Google Analytics中使用的技术, 他是通过在每个角留下1px的边框来实现圆角的效果,这是一种不用静态图片实现圆角的新方法。你可以在这里查看一个示例.

  

 

  16-3 个简单的步骤实现圆角

  - Alen Grakalic研究了通过三个步骤来编写一个固定宽度的圆角布局。 他也创建了一个demo。

  

 

  CSS表单问题

  17- 创建伟大的网页表单的技巧-

  Cris Coyer和我们分享了浮动标签,:focus伪类,使用建议等技巧。他同样建立了又好又简单的联系表单, 他先将它发布在这里.

  label {

  float: left;

  text-align: right;

  margin-right: 15px;

  width: 100px;

  }

  

 

  18- 简洁而纯粹的CSS表单设计- 秒速快3对于的CSS爱好者来说,本教程表述了一个如何设计纯粹的CSS表单而不使用HTML表格的建议。你可以在这里抓取代码.

  

 

  19-用javascript自动填充文本输入框-

  有时候,我们需要向用户解释他们理应填写文本输入框。当没有标签可以显示,一个通用的解决方案是,把一些占位符文本放在文本框中,并让它当标签来用。本教程介绍了一种很好的解决办法,并启用JavaScript ,label 元素是隐藏的,而且input 元素的title 属性值被复制到value属性。 如果已禁用JavaScript ,标签显示在被留空的文字输入框的上面。一个简单的演示,您可以在这里看到演示。

  

 

  值得检验的css技巧

  20-跨浏览器的用背景图的水平线-

  你或许想使用一个定制的图片来创建一个跨浏览器的水平线作为内容的分隔。

  div。hr {

  background: #fff url(myhrimg。gif) no-repeat scroll center;

  height: 10px

  }

  div.hr hr {

  display: none

  }你的代码可以像这样:<div class="hr"><hr /></div>

责任编辑:admin

分享到:

作者: 武汉北大青鸟 原载: 武汉北大青鸟徐东校区 www.h24storage.com
版权所有,转载时必须以链接形式注明作者和原始出处及本声明

027-87660036

开班信息

只为了方便您就学 徐东校区

秒速快3武汉市洪山区友谊大道504号金马凯旋家居北大青鸟徐东校区2楼(地铁8号线徐东站D出口徐东平价旁)

全真项目实战 入学签就业协议

Copyright (c) 2006-2020 武汉宏鹏职业培训学校 版权所有 All Rights Reserved.

865棋牌游戏 865棋牌游戏 幸运赛车人工计划 幸运赛车开奖直播 秒速快3 865棋牌 幸运赛车 广东快乐十分APP下载 内蒙古快3开奖结果 幸运赛车官网