北大青鸟

网站首页 > 常见IT技术问题 > Java开发 >

站内公告

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

责任编辑:宏鹏来源:武汉北大青鸟鲁广校区时间:2013-08-15 09:52:10
导读:一个合理的布局和结构是好选择。这不是因为你的布局在不同浏览器见表现不同,而且还因为的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(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 //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:52:10发布于北大青鸟鲁广校区。一个合理的布局和结构是好选择。这不是因为你的布局在不同浏览器见表现不同,而且还因为的CSS有很多方法来布局你的每个元素。今天,我与你们分享20多个常见Bug及其修正方法。

专业老师指导

赵老师

赵老师

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

立即在线咨询

培训咨询客服

陈老师

陈老师

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

立即在线咨询

本文地址:https://m.027hpedu.com/wenda/java/2820.html

文章标题:20多个常见Bug及其修正方法

上一篇:JAVA编程入门必读 学习java好资料

下一篇:Java WEB开发中的中文乱码问题解决

热点关注

推荐Java开发

热门Java开发

预约你的精彩未来

预约将免费领取7天课程体验卡

-------请选择试预约课程-------

JAVA
WEB前端
PHP
UI设计
Python
电子商务
视频剪辑
大数据工程师
平面设计

83345人已领取

全国百余家校区

只为您方便就学

北大青鸟鲁广校区

北大青鸟鲁广校区

武汉市洪山区珞喻路724号(地铁二号线光谷广场站F口出)

预约到校
领取学习大礼包

首页

热门课程

视频网课

新闻资讯

关于学校

联系学校

预约选课申请

  • 预约时间

    请选择预约时间

  • 预约课程

    请选择预约课程

  • 姓   名
  • 手机号
  • QQ 号
  • 微信号

添加老师微信号

专业老师24小时1对1学习指导

定制专属于你的专属学习方案

微信号:17740513250

复制老师的微信号

复制成功啦

快去微信添加老师为好友吧~

北大青鸟小青

微信号:17740513250

北大青鸟小青

微信号:17740513250

设置备注
小主知道啦