min-height最小高度的实现（兼容IE6、IE7、FF、Chrome）

最新推荐文章于 2019-06-08 11:45:22 发布
最新推荐文章于 2019-06-08 11:45:22 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css2与3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bonlog/article/details/8525181
本文分享了在airsea新网站上取得成功的经验与心得，为读者提供了宝贵的参考。 
.x-w-rev{overflow: hidden;_overflow: visible;min-height: 22px;height: auto!important;height: 22px;}


在airsea新网站中成功了

html兼容ie7ie8,解决IE6、IE7、IE8样式不兼容问题
weixin_34873798的博客
06-27 1196
这里和大家探讨一下解决IE6、IE7、IE8 DIV错位问题，如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，非常方便。IE6里DIV错位的问题采用”FLOAT：LEFT“的DIV在IE8、IE7、都没问题，IE6下却向下移动，出现空白。这是因为，IE6采用的内核默认把DIV之间的距离增加...
浏览器兼容问题及解决方案
HuaCHen_SHan的博客
06-25 1350
兼容问题
min-height最小高度实现的解决方法,(兼容IE6、IE7、FF、Chrome)
09-25
min-height最小高度实现的解决方法 且兼容IE6、IE7、FF、Chrome, 需要的朋友参考下
兼容浏览器的min-height和min-width
weixin_34318326的博客
06-28 395
min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。 转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/ 先说说min-height。这个看起来很容易。 看下面试例： <div style="border:5px solid #f00;min-height:200px;width:300px;pa...
最小高度兼容问题解决办法
aafzoy1242的博客
01-08 153
当给容器设定一个固定高度的时候，当所设高度无法装下内容的时候，IE6会自行调整高度以装下内容为止，简称被撑开了。但是IE6、IE7、IE8、火狐都不行，内容会跑到外面去。min-height:200px; 这个属性值说明容器的最小高度为200PX，当没有内容的时候，容器也会是200px，不会瘪下去的，如果内容很多的话，容器就会自适应高度了，这样做的好处是容器不会担心被撑开，也不会瘪下去，...
min-height最小高度的实现（兼容IE6、IE7、FF）
精彩人生
04-12 483
min-height最小高度的实现（兼容IE6、IE7、FF） - www.52css.com #mrjin { background:#ccc; min-height:100px;  height:auto !important;  height:100px;  overflow:visible; } --> www.52CSS.com Mr.
JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）
04-13
通过使用jQuery来实现iframe的高度自适应，我们可以确保内容在不同浏览器（包括IE、Firefox、Safari和Chrome）中的显示一致性，无论iframe内嵌的页面有多复杂。 首先，我们需要理解iframe的基本概念。IFrame，即...
html页面高度不固定在不同浏览器下的兼容性设置
09-25
例如，`document.documentElement.scrollHeight` 和 `document.body.scrollHeight` 是两个常见的获取页面高度的方法，但在IE和Chrome中，前者可能更准确，而在Firefox中，后者可能更准确。为了解决这个问题，我们...
兼容浏览器的最小高度(min-height)
Zerofishcoding的博客
09-14 2433
前言：在网页设计中，常常遇到需要设置最小高度的问题。例如，设计方案中需要给一个div设置一个背景图，而该div并不限定具体宽高值，其内部内容无法撑开背景图完全显示所需要的高度，此时便需要设置最小高度。即当div内的内容无法撑开父级高度时，会有一个最小高度保证父级背景显示完全，而当内容高度大于最小高度时，该div的高度就会完全由内容撑开。这里边要用到css的一个属性，即min-height。
div 自动适应页面高度 IE vs Google浏览器
05-15 3078
遇到一个问题。用.net做的网站中有三个div，他们是嵌套的关系 d2和d3是上下并列的。d1的高度是不变的，在d2中的内容发生变化的时候，d2的高度会跟着内容的多少发生变化，d3也跟着变化，但是不会超出d1的高度范围，即不会出界。 这个问题，测试使用的ie，没有问题，但是在google中就有问题了。 先看一些代码吧： d3的css是这样写的 .d3{height:200
min-height兼容浏览器用法
百川异源，终归于海
12-08 2614
alimama_pid="mm_11307516_1146824_2589042"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000";
兼容各个浏览器的最大高度和最小高度
weixin_34268310的博客
11-25 626
2019独角兽企业重金招聘Python工程师标准>>> ...
设置max-width以及min-width兼容问题和解决方案
张许许的博客
06-08 9162
例子1 style="width:300px;min-width:195px;max-width:100%" 例子2 <el-input placeholder="输入消费机名称,多个用(,)英文号隔开" style='width:230px;min-width: 100px;max-width: 100%;' size="mini" v-model="DB_search.dName"&g...
dom4j的基本操作
bonlog的专栏
07-07 3168
/** * 建立一个XML文档,文档名由输入属性决定 * @param filename 需建立的文件名 * @return 返回操作结果, 0表失败, 1表成功 */ import java.io.File; import java.io.F
<style> #source { width: 50%; height: 500px; background-color:rgb(0,0,0,0.1); } .ace-chrome .ace_marker-layer .ace_active-line{ /当前行/ background-color: rgba(0,0,0,0.1); } .button, input, optgroup, select, textarea { /选择题的题号大小/ font-family: sans-serif; font-size: 150%; line-height: 1.2; } body{ background: url(“./”) 0% 0% / 100% no-repeat; } <?php } ?> /* 定义错误行的样式 / .ace_error_marker { position: absolute; background-color: rgba(0, 0, 0, 0.1); / 红色半透明背景 */ } </style> 美化页面、直接在源代码上修改
最新发布
04-05
<think>好的，我现在需要帮用户分析并修改他们提供的HTML和CSS代码，以达到美化页面的目的。首先，我得仔细阅读用户提供的代码，理解各个部分的作用，然后找出可以改进的地方。 用户提供的代码中，有一个ID为`source`的元素，设置了宽度50%、高度500px，背景颜色是半透明的黑色。接下来是Ace编辑器的当前行样式，背景颜色也是半透明的黑色。然后是一些表单元素的字体和大小设置，body的背景图部分看起来有问题，因为URL是空的，而且有一个未闭合的PHP标签`<?php } ?>`，这可能会导致错误。最后定义了一个错误行的样式，使用了半透明的黑色背景，但注释中提到红色，可能需要调整。 接下来，我需要考虑如何美化页面。首先，半透明的黑色背景可能让页面显得沉闷，可以替换为更明亮的颜色或渐变色，提升视觉效果。然后，检查CSS代码的结构，确保选择器和属性排列有序，适当添加注释提高可读性。body的背景图URL为空，应该移除或替换为有效的图片路径。未闭合的PHP标签需要修复，但如果是纯CSS环境，应该删除这部分。错误行的背景颜色应该改为红色半透明，以符合注释中的描述。 另外，表单元素的字体大小设置为150%可能过大，调整到更合适的比例，比如100%，同时优化边距和填充，使元素间距更合理。Ace编辑器的当前行样式可以增加更明显的视觉反馈，比如使用浅蓝色背景。还可以添加过渡效果，使交互更平滑，比如输入框聚焦时的边框颜色变化。 最后，确保所有语法正确，删除无效或错误的部分，如多余的PHP标签，并修正CSS注释的格式。检查代码的格式化和缩进，保持一致性，提升可维护性。完成这些修改后，页面应该更美观、结构更清晰，用户体验也会更好。</think>我将帮助您分析并优化这段代码。以下是分步骤的修改建议： $$/* 原始代码分析 */ #source { width: 50%; height: 500px; background-color:rgb(0,0,0,0.1); /* 半透明白色背景 */ } .ace-chrome .ace_marker-layer .ace_active-line { background-color: rgba(0,0,0,0.1); /* 当前行高亮 */ } .button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 150%; /* 字体放大 */ line-height: 1.2; } body{ background: url("./") 0% 0% / 100% no-repeat; /* 无效背景图 */ } <?php } ?> /* 语法错误 */ .ace_error_marker { background-color: rgba(0, 0, 0, 0.1); /* 错误提示 */ }$$ 以下是优化后的代码及说明： ```html <style> /* 容器样式优化 */ #source { width: 60%; /* 更合适的比例 */ height: 600px; /* 增加可视区域 */ margin: 20px auto; /* 居中显示 */ background: linear-gradient(145deg, rgba(245,245,245,0.9), rgba(255,255,255,0.95)); /* 渐变背景 */ border-radius: 10px; /* 圆角效果 */ box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 立体阴影 */ padding: 15px; /* 内边距 */ } /* 编辑器当前行优化 */ .ace-chrome .ace_marker-layer .ace_active-line { background-color: rgba(135,206,250,0.2) !important; /* 浅蓝色高亮 */ transition: background 0.3s ease; /* 过渡动画 */ } /* 表单元素优化 */ .button, input, optgroup, select, textarea { font-family: 'Segoe UI', system-ui, sans-serif; /* 更现代字体 */ font-size: 100%; /* 标准尺寸 */ line-height: 1.5; /* 舒适行高 */ padding: 8px 12px; /* 增加点击区域 */ margin: 5px 0; /* 元素间距 */ border: 1px solid #ddd; /* 柔和边框 */ border-radius: 4px; /* 统一圆角 */ transition: all 0.3s; /* 统一过渡效果 */ } /* 错误提示增强 */ .ace_error_marker { background-color: rgba(255,0,0,0.15) !important; /* 红色警示 */ border-bottom: 2px dotted #ff4444; /* 下划线提示 */ } /* 全局样式 */ body { background: #f8f9fa url("data:image/svg+xml,%3Csvg...") repeat; /* 纹理背景 */ min-height: 100vh; /* 全屏高度 */ padding: 20px; /* 安全边距 */ } /* 输入框聚焦效果 */ input:focus, textarea:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25); outline: none; } </style> ``` 主要优化点说明（使用Markdown表格呈现）： | 优化项目 | 原始代码问题 | 优化方案 | |-------------------|---------------------------------------|--------------------------------------------------------------------------| | 容器布局 | 静态尺寸无居中 | 增加`auto`边距实现居中，添加阴影和渐变提升质感 | | 代码编辑器 | 单调的高亮样式 | 使用浅蓝色背景+过渡动画，提升视觉反馈 | | 表单元素 | 字体过大(150%)，样式老旧 | 标准化尺寸，添加聚焦效果，统一UI风格 | | 错误提示 | 警示色不明显 | 改用红色系+下划线，增强错误识别度 | | 背景设置 | 无效的空URL | 替换为SVG纹理背景，提升页面质感 | | 交互体验 | 缺乏动态效果 | 为所有交互元素添加平滑过渡动画 | | 代码结构 | 存在PHP语法错误 | 移除`<?php } ?>`无效标签，保证纯前端环境兼容性 | 建议后续可添加的功能： 1. 暗黑模式支持：通过CSS变量实现主题切换 2. 响应式布局：添加媒体查询适配移动设备 3. 加载动画：通过`@keyframes`添加加载指示器 4. 自定义滚动条：使用`::-webkit-scrollbar`美化滚动条
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值