您现在的位置是：网站首页> 编程资料编程资料
浏览器分辨率不一的浮动问题解决方法浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
2021-09-06
941人已围观
简介 这篇文章主要介绍了浏览器分辨率不一的浮动问题解决方法，需要的朋友可以参考下
在设计导航栏时因为总的content宽度设定为70%,用了
- 标签来排列导航内容 复制代码代码如下:
.meun ul{
width: 100%;
height: 40px;
font: bolder 18px/40px "微软雅黑","微软雅黑",Microsoft YaHei;
border: 1px solid rgb(206, 24, 0);
background: url(../images/menu_bg.png) repeat-x scroll 0px 0px transparent;
margin: 0px auto;
list-style:none outside none;
}
给每个, - 设置浮动 复制代码代码如下:
.meun ul li{
float:left;
}
再给每个 - 的class设置属性 复制代码代码如下:
.linormal{
width:16.7%;
height:40px;
text-align: center;
border-left:1px solid rgb(255, 164, 123);
border-right:1px solid rgb(221, 47, 0);
float: left;
}
linormal下的标签的width是100%，开始的时候也和linormal设置成16.7%，导致文字不能显示全部，复制代码代码如下:
.linormal a{
width:100%;
height:40px;
display:block;
color:#fff;
text-decoration:none;
}
再就是 标签的:hover属性了复制代码代码如下:
.linormal a:hover{
background: url("../images/menu_bg.png") repeat-x scroll 0px -40px transparent;
text-decoration: none;
color: rgb(255, 255, 255);
}
上面的代码可以随着浏览器窗口的大小进行相应的改变大小，因为是按照百分比来定的宽度，但随着窗口的越来越小，导致导航栏的- 中的宽度小于字体的宽度，字体
下浮，整个页面完全乱了。
后来便在menu下面加了个宽度的id，命名为wid，即复制代码代码如下:
.wid {
width:1000px;
}
在HTML页面内，调用方式为复制代码代码如下:
这样就调整了当改变窗口大小时，部分内容会在缩小的部分里看不到（这里表述不大清楚，大致意思是缩小窗口时，不会导致页面容器相应的变小，而是只显示一部分），这样就不会出现页面布局出现混乱的现象了。 - 中的宽度小于字体的宽度，字体
相关内容
- 采用CSS定位属性实现Html中DIV层叠与悬浮CSS鼠标悬浮DIV后显示DIV外的按钮解决方法纯CSS结合DIV实现的右侧底部简洁悬浮效果CSS实现的div悬浮框并且兼容IE6的样式纯CSS实现DIV悬浮的示例代码(固定位置)
- div不能自适应高度不能随图片的高度变化设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- CSS Font-Size: em、px 、pt 、Percent之间的关系及换算详解使用 CSS 的 font-size-adjust 属性改善网页排版知识普及之CSS: body{font-size: 62.5%;}这种写法的原因CSS中的font-size属性使用教程CSS的font-size属性及其em值的使用css font-size属性说明CSS网页布局学习之Font-size的妙用css中一些常用的font-size字体单位和line-height详解
- CSS百分比定义高度为什么没有效果CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS3感应鼠标的背景闪烁和图片缩放动画效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- css3 自定义字体font-face使用介绍CSS3用@font-face实现自定义英文字体CSS定义字体间距 字体行与行间距 CSS教程:网页字体的设置和控制详解CSS定义字体、颜色、背景等属性
- CSS禁止文字选择user-select应用CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- ie6下embed标签不能播放视频问题解决方法浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
- CSS定位的几个类型简单介绍CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS解决文字与图片不能水平居中对齐的问题CSS实现同一行的图片和文字垂直居中对齐的方法垂直居中对齐的CSS示例代码css中使input输入框与img(图片)在同一行居中对齐通过css使用background-color为背景图添加遮罩效果的两种方法SCSS移动端页面遮罩层效果的实现及常见问题解决css遮罩全屏居中对齐的实现方式
