`
dyclh
  • 浏览: 50889 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

实战中总结出来的CSS常见问题及解决办法

阅读更多

一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

二、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大。

三、一个兼容性调整(IE和Mozilla)的笨办法:
初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。
临时解决方法:选择符{属性名:B !important;属性名:A} 或许有时候并没有效果。你可以在
www.aa25.cn搜索更多的BUG解决方法。

四、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding

五、li标签前面的图标推荐使用background-image,而不是list-style-image。

六、IE分不清继承关系和父子关系的差别,全部都是继承关系。

七、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您,不要太疯狂了。

八、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。因为图片丢失了,也可以保持文字的可读性。

九、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

十、与内容无关的图片请使用background。时刻记住表现与内容分离。

十一、定义颜色可以缩写#8899FF=#89F

十二、table在某些方面还是有用武之地的,在遇到内容为数据表格时,不要对它产生憎恨的心理。

十三、<script>没有language这个属性,应该写成这样:<script type=”text/javascript”>

十四、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试)

table{ border-collapse:collapse; }
td{ border:#000 solid 1px; }

十五、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。

十六、绝对定位时使用margin值定位可以达到相对于本身所在位置的定位,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

十七、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效

<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>

十八、在IE中可能由于注释带来的文字重复问题时可以把注释改为:

<!–[if !IE]>Put your commentary in here…<![endif]–>

十九、如何用CSS调用外部字体
语法:
@font-face{font-family:name;src:url(url);sRules}
取值:
name:字体名称。任何可能的 font-family 属性的值
url(url):使用绝对或相对 url 地址指定OpenType字体文件
sRules:样式表定义

二十、如何让一个表单中的文本框中的文字垂直居中?
如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白就可以实现想想的效果了。

二十一、定义A标签要注意的小问题:
当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。只定义了一个a:link时,一定要记得把其它三种状态定义出来!

二十二、并不是所有样式都要简写:
当样式表前定义了如p{padding:1px 2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的p.style1的样式也要变。

二十三、网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等。

二十四、固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。

文章出处:标准之路(http://www.aa25.cn/web_w3c/553.shtml)

分享到:
评论

相关推荐

    css实用的技巧 css css

    1. **CSS经典技巧20条总结**:这个文档可能包含了20个经过实战检验的CSS技巧,包括选择器的高效使用、浮动和定位的解决策略、动画和过渡的应用等。 2. **CSS实用教程**:可能涵盖了基础到进阶的CSS知识,如盒模型...

    HTML+CSS标签参考手册(PDF+自制WORD)

    HTML和CSS是构建网页的基础,它们...而在WORD版中,作者可能分享了实战中遇到的问题和解决方案,例如浏览器兼容性问题、CSS布局技巧、优化方法等。结合两者的知识,可以更深入地掌握这两门技术,并提升网页开发能力。

    CSS Mastery Advanced Web Standards Solutions

    通过学习本书,开发者可以更好地理解CSS的工作原理,并学会如何解决常见的浏览器兼容性问题。 #### 二、核心内容概览 1. **高级CSS技巧**:书中提供了大量的高级技巧,涵盖了从简单的布局到复杂的动态效果,帮助...

    HTM5与CSS3响应式Web-设计模式-高级程序设计

    设计模式是解决常见问题的经验总结,是开发者之间的通用语言。在HTML5中,新增了许多语义化的元素,如、、等,这些元素使得页面结构更加清晰,有助于搜索引擎优化和无障碍访问。CSS3引入了新的选择器、布局模型(如...

    java程序设计从入门到精通cssdiv网页布局实战手册.docx

    ### Java程序设计从入门到精通CSS Div网页布局实战手册知识点概览 #### 一、章节概述 本章节主要介绍如何在网页中运用图片,并通过CSS对图片进行样式控制,达到美观的效果。具体包括图片的引入、尺寸调整、图文混排...

    div和CSS大全

    - **常见问题**:列举常见的CSS问题及其解决方案。 **3.3 CSS的十八般技巧** - **高级技巧**:涵盖CSS选择器、定位、过渡、动画等方面的技术点。 **3.4 WEB打印实例教程** - **打印样式表**:使用`@media print`...

    HTML5和CSS3设计模式

    - 介绍了一些常见问题的解决方法,如元素重叠、对齐不准确等。 9. **第9章:定位:高级** - 探讨了更复杂的定位场景,如多列布局、响应式设计等。 - 提供了一些高级定位技巧,帮助开发者应对复杂布局挑战。 10...

    Div+CSS 布局大全

    - **实践经验**:分享作者或其他专家在实践中遇到的问题及解决方案。 ### 总结 本文档涵盖了Div+CSS布局的基础到高级知识点,适合初学者和有一定经验的开发者参考。通过深入理解HTML的结构化和CSS的布局原理,可以...

    交互设计-响应式Web设计实践 PDF电子书下载 带书签目录 完整版

    #### 4.2 常见问题及解决方案 在实践中经常会遇到一些挑战,比如如何处理复杂布局在小屏设备上的显示问题、如何保证图片质量同时减少加载时间等。针对这些问题,可以总结出一系列有效的解决策略和技术手段。 #### ...

    div+css 学习资料

    - 文件中可能包含不同类型的实例,如创建简单的两列布局,响应式导航菜单,或者是复杂布局的实现,这些都是实践中常见的应用场景。 总的来说,这份学习资料应该涵盖了从基础到进阶的div+css知识,包括理论讲解、...

    微信小程序实战课程开发与实施.pdf

    此外,课程开发过程中还可以引入计算思维,这是一种解决问题和设计系统的方法论,有助于提高学生的逻辑思维和问题解决能力。 总结来说,微信小程序实战课程的开发与实施涉及到的技术知识点包括:微信小程序的开发...

    selenium java自动化测试实战

    Selenium是一个用于Web应用程序测试的工具。它通过模拟用户与浏览器的交互,可以执行各种测试...通过虫师的经验分享,读者能够学习到如何更有效地运用Selenium进行Web自动化测试,并掌握在实际工作中解决问题的技巧。

    Electron开发实战1

    解决这些问题需要查阅官方文档、社区论坛和相关教程。 ## 总结 Electron框架为开发者提供了简单易用的桌面应用开发途径,通过HTML、CSS和JavaScript就能构建跨平台的应用。然而,也需要注意其性能和体积问题。了解...

    jQuery实战代码

    jQuery实战涵盖了网页开发中的多个重要方面,从基础操作到复杂的交互设计,jQuery都能提供便利的解决方案。通过实践这些实例,开发者不仅可以掌握jQuery的基本用法,还能深入理解如何利用它来提升网页的交互性和用户...

    【中文】【AJAX实战】【(PDF) 】

    ### AJAX实战中的常见问题及解决方法 1. **跨域问题**: - 解决方案包括JSONP、CORS(Cross-Origin Resource Sharing)等技术。 - JSONP通过动态插入`&lt;script&gt;`标签来实现跨域数据请求。 - CORS则需要服务器端...

    14-总结.md

    在本文中,我们将详细探讨前端面试中常见的基础知识题目,并对这些知识点进行复习和总结。 首先,我们要明白为什么要在面试中考察前端基础知识。这些基础知识点是前端开发工作的基石,它们能够保证开发者在工作中...

    selenium2 python自动化测试实战

    - **常见问题及解决方案**:总结在实际开发过程中遇到的问题及其解决方法。 #### 五、总结与展望 - **总结**:回顾Selenium2 Python自动化测试的核心概念和技术要点。 - **未来趋势**:探讨自动化测试领域的发展...

    实战spring mvc

    提供的两个文件,"spring3 MVC实战,手工搭建Spring3项目demo_敲敲代码跳跳舞……_百度空间.mht"和"Spring3中js-css-jpg-gif等静态资源无法找到(No mapping found for HTTP request with URI)问题解决_敲敲代码跳...

Global site tag (gtag.js) - Google Analytics