CSS十大经典问题及解决方案

最新推荐文章于 2022-04-05 21:04:15 发布
最新推荐文章于 2022-04-05 21:04:15 发布 · 162 阅读 · 0
文章标签：

#CSS #Web #IE #XHTML #Flash

本文汇总了CSS布局中常见的问题及其解决方法，包括超链接hover失效、IE6双倍边距BUG、FF下容器高度自适应等，并提供了详细的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

[url=http://www.leutao.com/][img]http://www.leutao.com/templates/default/style/logo.png[/img][/url]


1、超链接访问过后hover样式就不出现的问题
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
a:link {
color:red;
}
a:hover {
color:blue;
}
a:visited {
color:green;
}
a:active {
colorrange;
}
</style>
</head>
<body>
<a href="#" mce_href="#">
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</a>
</body>
</html>


解决方案：被点击访问过的超链接样式不在具有hover和active了，很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序：L-V-H-A

2、IE6的双倍边距BUG
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
body {
margin:0
}
div {
float:left;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
<body>
<div>
<a href="#" mce_href="#">web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</a>
</div>
</body>
</html>


解决方案：浮动后本来外边距10px，但IE解释为20px，解决办法是加上display:inline

3、FF下为什么父容器的高度不能自适应
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
width:200px;
border:1px solid red
}
p {
float:left;
width:100px;
}
</style>
</head>
<body>
<div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</p></div>
</body>
</html>


解决方案一：为什么这个P撑不开DIV呢？解决的办法是在div与p之间插入<div style="clear:both"></div>清除掉这个p的浮动
解决方案二：不用插入<div style="clear:both"></div>，只要去掉P的浮动属性，把float:left;去掉即可

4、IE下为什么图片下方有空隙产生
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
border:1px solid red;
backgroundrange;
}
img {
width:276px;
height:110px;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" />
</div>
</body>
</html>


解决方案：这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动float:left或者相对IE6定义.left margin-right:-3px;

5、web标准中定义id与class有什么区别吗

解决方案：
一、web标准中是不容许重复ID的，比如div id="aa"一个页面中不容许重复2次，而class定义的是类，理论上可以无限重复的，这样需要多次引用的定义便可以使用他.class还可以同时引用多个类，不同的类之间用空格隔开

二、属性的优先级问题，ID的优先级要高于class，看上面的例子

三、方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单


6、如何垂直居中文本
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
height:30px;
line-height:30px;
border:1px solid red
}
</style>
</head>
<body>
<div>web标准常见问题大全</div>
</body>
</html>


解决方案：给容器设置一个与其高度相同的行高就可以了

7、如何对齐文本与文本输入框
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
input {
width:200px;
height:30px;
border:1px solid red;
}
</style>
</head>
<body>
<input type="text" />aaaaaaaaaaaaaaaaaa
</body>
</html>

解决方案：遇到此种问题，设置文本框的vertical-align:middle就可以了

8、为什么FF下文本无法撑开容器的高度
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
<body>
<div>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见</div>
</body>
</html>


解决方案：标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的，那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;，这里为了照顾不认识min-height的IE6可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}


9、为什么无法定义1px左右高度的容器
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
background:red;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>


解决方案：IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如overflow:hidden|zoom:0.08|line-height:1px
overflow:hidden：这个方法对所有的浏览器都没用
zoom:0.08：这个方法对FF没用
line-height:1px：这个方法对所有浏览器都有用

10、怎么样才能让层显示在FLASH之上呢
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:200px;
background:red
}
object {
width:500px;
height:100px;
}
</style>
</head>
<body>
<div>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</div>
<object type="application/x-shockwave-flash" data="http://gg.blueidea.com/2005/www/m533-104.swf">
<param name="movie" value="http://gg.blueidea.com/2005/www/m533-104.swf" />
</object>
</body>
</html>


解决方案：解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
前端开发中的十大常见问题及解决方案
m0_72812480的博客
07-08 861
本文总结前端开发中高频出现的痛点问题，涵盖跨浏览器兼容、布局适配、性能优化等场景，提供可落地的解决思路。
前端开发常见十大问题解析：涵盖浏览器兼容性、性能优化、响应式设计、状态管理及安全防护等关键领域解决方案
07-14
内容概要：本文详细讲解了前端开发中常见的十大问题及其解决方案，涵盖浏览器兼容性、页面性能优化、响应式设计、状态管理、安全防护、跨域通信、构建工具配置、测试覆盖率提升以及 TypeScript 集成等关键领域。...
学习CSS遇到的问题总结
m0_61547956的博客
04-05 677
1.文字图标为什么不显示？ 更新了图标之后，没有把新的font文件夹复制过来，或者是路径不对。 2.一个大盒子里面有两个小盒子，小盒子的宽度加起来并没有超过大盒子的宽度，为啥其中有一个盒子会掉下来？ 行内块元素之间默认有一段小的宽度，增加浮动就可以解决，去掉这个空隙。 3.颜色属性值无效？ 没写#。 4.字体图标是行内元素，贴着文字，可以设置的定位。 5.比如淘宝界面的轮播图，不可能只有一张，把图片放到li中，让ul来滚动。 6.图片设置了line-high没有居中？ 图片默认和文字的基线
10个HTML和CSS必须知道的重点难点问题
weixin_30471065的博客
04-03 224
前端日刊 登录 10个HTML和CSS必须知道的重点难点问题 2018-02-26 阅读 2982 收藏 6 原链：segmentfault.com 分享到： 前端必备图书《深入浅出Node.js》>>>> 1.怎么让一个不定宽高的 DIV，垂直水平居中? 使...
CSS浏览器兼容性问题 归纳
chenmoquan的专栏
09-03 8646
1.怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。 2.IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。例如： HTML： CSS： [url=][/url] .myDiv{
[转]CSS布局口诀 - CSS BUG顺口溜
weixin_30485291的博客
05-12 236
在进行CSS网页布局时遇到BUG，请认真阅读以下内容，非常容易记忆的，不知道哪位高人把CSSBUG编成了顺口溜了！看看好不好记住呢？ 一、IE边框若显若无，须注意，定是高度设置已忘记； 二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中； 三、三像素文本慢移不必慌，高度设置帮你忙； 四、兼容各个浏览须注意，默认设置行高可能是杀手； 五、独立清除浮动须...
15个经典的css常见问题及解决方法汇总
lxacyj123的专栏
03-26 1575
在div+css设计中，我们常发生这样的问题：如何清除列表前的圆点、IE6的双倍边距bug、浮动ie产生的双倍距离、IE与宽度和高度的问题等，现汇总问题与解决方法如下。 1.怎么让一个div块级元素水平居中 #layout {margin:0 auto;} 2.如何清除列表前的圆点 .list { list-style-type:none;} 3.CSS强制换行与强制不换行 /* 禁
CSS十大经典问题
aiqixiao2017的博客
06-26 160
1.超链接访问过后hover样式就不出现的问题 代码:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> <html xmlns="http://www.w3.org/1999/xhtml" xml:l...
Vue.js面试精华：十大经典问题及解决方案
Vue.js 面试题及答案大全深入探讨了面试中常被提及的关键知识点，特别是针对从 Vue 1.0 升级到 Vue 2.0 过程中遇到的问题解决方案。这些问题涵盖了Vue的核心概念和实践技巧： 1. **生命周期管理**：Vue 2.0 引入了...
css十大绝秘技巧
01-07
### CSS十大绝秘技巧解析 #### 一、精简字体属性定义 在CSS中，我们经常需要设置元素的字体样式，包括字号、行高、字体加粗、斜体、小型大写字母以及字体类型等。一种更为简洁的方法是将这些属性合并到一个`font`...
【SAP常见问题解决方案】：十大问题不再是障碍
[【SAP常见问题解决方案】：十大问题不再是障碍](https://blogs.sas.com/content/sgf/files/2017/01/Securing-sensitive-data-using-SAS-Federation-Server.jpg) # 摘要 本文旨在深入探讨SAP系统的架构和管理，分析...
CSS技巧：十大密技详解
理解这一机制对于解决样式覆盖问题至关重要。 7. 使用预处理器（如Sass或Less）：预处理器提供了变量、嵌套规则、混合等功能，可以写出更易维护的CSS代码。 8. 雪碧图（Sprite）技术：将多个小图标整合到一张大图...
div+css设计中常见问题的解决办法
weixin_34221773的博客
08-17 292
作为前端开发人员，在日常的页面制作时，不可避免的会碰上这样那样的问题，我挑选了其中的一些进行总结归档，希望对大家会有所帮助： 1、如何定义高度很小的容器？ 在IE6下无法定义小高度的容器，是因为有一个默认的行高。 列举2种解决方案：overflow:hidden | line-height:0 2、图片下方出现几像素的空白间隙？ 这个也有多种解决方案，如将img定义...
刚接触HTML css可能遇到的问题以及解决方法
weixin_45492475的博客
12-19 561
问题 标签嵌套 标签选用 结构（有的上下有的左右，怎么把上下变成左右） 解决方法 标签的嵌套要求 块标签里面可以嵌套块标签以及行内标签 <div> <a href="#"></a> </div> 行内标签里面不能嵌套块标签 解决结构问题 元素的分类 行内元素 a em i… 不独占一行 左右结构 设置宽高不会有任何变化 受换...
基于SVM算法的人民币面值识别系统：从图像处理到机器学习模型的实现与应用 · 数字图像处理
08-11
基于支持向量机(SVM)的人民币面值识别系统的设计与实现。该系统利用MATLAB GUI工具，结合数字图像处理技术和机器学习模型，能够高效识别多种面值的人民币。主要步骤包括数据集准备、图像灰度化、边缘检测、旋转矫正、形态学操作、ROI截取、加载SVM模型、面值识别及结果验证。系统目前可识别1元至100元面值，正确率达到90%以上，并可通过扩展训练数据集来提升识别精度和覆盖更多面值。 适合人群：从事图像处理、机器学习研究的技术人员，以及对人民币面值识别感兴趣的开发者。 使用场景及目标：适用于银行、自助设备、零售终端等需要快速准确识别人民币面值的场合。目标是提供一种高效、准确、易用的人民币面值识别解决方案。 其他说明：该系统不仅展示了SVM在图像分类任务中的强大能力，还通过MATLAB GUI实现了操作流程的可视化，便于用户理解和使用。未来可以通过优化算法和增加训练样本进一步提升系统性能。
ctkqiang-WangZhongZhi-62936-1753627160067.zip
08-11
点sun小白ctkqiang_WangZhongZhi_62936_1753627160067.zip
LabVIEW调用基恩士XGX8500相机实现高效画面嵌入的开源方案 权威版
08-11
如何使用LabVIEW调用基恩士XGX8500相机实现画面嵌入的技术方案。首先，文中强调了准备工作的重要性，包括安装LabVIEW及其相关驱动和SDK，获取基恩士XGX8500相机的接口文档。接着，阐述了通过调用基恩士提供的API控制相机的具体步骤，如初始化相机、设置参数、开启预览流、获取画面数据等。然后，讲解了如何将获取的画面数据嵌入到LabVIEW的程序中，通过图形界面设计使相机画面合理显示。最后，指出该方案不仅能够节省昂贵的HX软件授权费用，还因其源程序和方法的开放性，为用户提供更多定制化的可能。 适合人群：从事工业自动化、机器视觉领域的工程师和技术人员。 使用场景及目标：适用于需要集成高质量图像采集设备的工业生产和检测系统，旨在提升自动化水平和视觉信息丰富度，降低软件授权成本。 其他说明：文中附有简单代码片段，帮助读者更好地理解和实践该方案。
PANDA 真空泵 WV 1200 A、WV 1800 A 和 WV 2400 A 使用说明书.pdf
最新发布
08-11
PANDA 真空泵 WV 1200 A、WV 1800 A 和 WV 2400 A 使用说明书.pdf
基于Jenkins Pipeline实现Java项目自动化构建与发布
08-11
资源下载链接为： https://pan.quark.cn/s/22ca96b7bd39 在当今的软件开发领域，自动化构建与发布是提升开发效率和项目质量的关键环节。Jenkins Pipeline作为一种强大的自动化工具，能够有效助力Java项目的快速构建、测试及部署。本文将详细介绍如何利用Jenkins Pipeline实现Java项目的自动化构建与发布。 Jenkins Pipeline简介 Jenkins Pipeline是运行在Jenkins上的一套工作流框架，它将原本分散在单个或多个节点上独立运行的任务串联起来，实现复杂流程的编排与可视化。它是Jenkins 2.X的核心特性之一，推动了Jenkins从持续集成（CI）向持续交付（CD）及DevOps的转变。 创建Pipeline项目 要使用Jenkins Pipeline自动化构建发布Java项目，首先需要创建Pipeline项目。具体步骤如下： 登录Jenkins，点击“新建项”，选择“Pipeline”。 输入项目名称和描述，点击“确定”。 在Pipeline脚本中定义项目字典、发版脚本和预发布脚本。 编写Pipeline脚本 Pipeline脚本是Jenkins Pipeline的核心，用于定义自动化构建和发布的流程。以下是一个简单的Pipeline脚本示例： 在上述脚本中，定义了四个阶段：Checkout、Build、Push package和Deploy/Rollback。每个阶段都可以根据实际需求进行配置和调整。 通过Jenkins Pipeline自动化构建发布Java项目，可以显著提升开发效率和项目质量。借助Pipeline，我们能够轻松实现自动化构建、测试和部署，从而提高项目的整体质量和可靠性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值