云顶国际,云顶国际登录官网

关闭阿里云百日千才计划

    欢迎访问云顶国际登录官网~

  1. 加入收藏
  2. 设为主页
  3. 学校简介
北大青鸟

三分钟了解北大青鸟

×
  • 北大青鸟大数据课程
  • 北大青鸟网络工程师
  • 北大青鸟web设计专业
  • 北大青鸟PHP专业
  • 北大青鸟启蒙星课程

20多个常见Bug及其修正方法

责任编辑:武汉宏鹏来源:云顶国际登录官网Java技术教程发布时间:2013-08-15 09:51
导读:一个合理的布局和结构是好选择。这不是因为你的布局在不同浏览器见表现不同,而且还因为的CSS有很多方法来布局你的每个元素。今天,我与你们分享20多个常见Bug及其修正方法。

   毫无疑问,一个合理的布局和结构是好选择。这不是因为你的布局在不同浏览器见表现不同,而且还因为的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;

  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。

  /* 对主流浏览器 */

  .container {

  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。

  #wrapper {

  width:530px;

  height:25px;

  background:url(/tech/java/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有什么不同?

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

  #redSquare

  {

  position: relative;

  bottom: 40px;

  right: 40px;

  }

  显示这样:

  

 

  11-HangTab(固定标签)

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

  #hang_tab {

  position: absolute;

  : 7px;

  left: 0px;

  width: 157px;

  height: 93px;

  }

  

 

  CSS 浮动概念

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

  浏览几十个相关文章,并选择了在用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: ".";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;

  }

  #container

  {display: inline-block;}

  /* Hides from IE-mac \*/

  * html #container

  {height: 1%;}

  #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;

  height:14px;

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

  }同样 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表单设计- 对于的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>

本文标题:20多个常见Bug及其修正方法,责任编辑:武汉宏鹏,来源:北大青鸟武汉宏鹏鲁广校,于2013年08月15日09时51分发布于云顶国际登录官网。云顶国际宏鹏鲁广校区,是北大青鸟武汉电脑学校,专业IT计算机培训,拥有软件/网络/安卓/Web前端/Java课程.北大青鸟地址:光谷广场鲁巷数码港.电话:15902769092

专业老师指导

专业老师指导

赵老师

从事IT教育培训十年有余,致力于帮助广大学子找到适合自己的专业。

培训咨询客服

培训咨询客服

陈老师

IT培训专业客服,用自己的真诚解决了无数学子的困惑。

本文地址:
文章标题:

热门课程

More+
  • 北大青鸟Java软件开发

    北大青鸟Java软件开发

  • 北大青鸟UI设计课程_零基础可学

    北大青鸟UI设计课程_零基础可学

  • 北大青鸟动漫设计_武汉设计学校

    北大青鸟动漫设计_武汉设计学校

  • 北大青鸟数字艺术_武汉电脑学校

    北大青鸟数字艺术_武汉电脑学校

在线咨询
×
在线咨询更多问题

如您有任何疑问
在线咨询随时为您解答或拨打咨询热线:15902769092

×
  • 姓 名*
  • 手 机*
  • QQ号/微信号
  • 所报学科 *
  • 其他备注
  • 温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一报名服务。