IE6不支持border-color:transparent 的问题解决(转载)

IE6不支持设置transparent为边框的颜色。

例如:
border:solid 1px transparent;

tb1

解决方法:
border:solid 1px transparent;

_border-color:tomato;

_filter:chroma(color=tomato);

 

(说明: Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:

Filter:Chroma(color=color)
这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。)

 

结果如下:
tb2

边框是没了,可字体怎么。。。
主意,以上现象是只有在打开系统的ClearType时才会看到的,如果把ClearType关掉就没问题了,见下:
tb3 
关于这个问题的一个演示页面:
http://icant.co.uk/sandbox/msieopacityissue/
另:
http://www.hedgerwow.com/360/bugs/fix-ie-opacity-text.html

解决方法:
border:solid 1px transparent;
background-color:#BFDBFF;

_border-color:tomato;

_filter:chroma(color=tomato);
 

tb4 

<template> <div class="login-container"> <div class="login-box"> <div class="logo">云盘系统</div> <h2>欢迎回来</h2> <p class="sub-title">请登录您的账户</p> <el-form :model="loginForm" :rules="loginRules" label-width="0" ref="loginFormRef" > <!-- 邮箱 --> <el-form-item prop="email"> <el-input v-model="loginForm.email" placeholder="邮箱" prefix-icon="el-icon-message" /> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" /> </el-form-item> <!-- 记住密码 --> <el-form-item> <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox> </el-form-item> <!-- 登录按钮 --> <el-form-item> <el-button type="primary" class="login-btn" @click="handleLogin" :loading="loginLoading" > 登录 </el-button> </el-form-item> </el-form> <!-- 快捷登录 --> <div class="social-login"> <div class="divider"> <span>其他登录方式</span> </div> <div class="social-buttons"> <el-button type="link" icon="el-icon-qq" class="social-btn" @click="handleQQLogin"> QQ登录 </el-button> <el-button type="link" icon="el-icon-wechat" class="social-btn" @click="handleWechatLogin"> 微信登录 </el-button> </div> </div> <!-- 注册链接 --> <div class="extra-links"> <router-link to="/register">还没有账号? 立即注册</router-link> <span class="forgot-password" @click="handleForgotPassword">忘记密码?</span> </div> </div> </div> </template> <script setup lang="ts"> import { reactive, ref, onMounted } from 'vue'; import { useRouter } from 'vue-router'; import { ElMessage } from 'element-plus'; const router = useRouter(); const loginFormRef = ref(); const loginLoading = ref(false); const loginForm = reactive({ email: '', password: '', remember: false }); const loginRules = reactive({ email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱格式', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '密码长度应为6-15位', trigger: 'blur' } ] }); // 处理登录 const handleLogin = async () => { (loginFormRef.value as any).validate(async valid => { if (!valid) return; loginLoading.value = true; // 模拟登录请求 await new Promise(resolve => setTimeout(resolve, 1500)); // 实际项目中应调用API验证用户 ElMessage.success('登录成功,即将进入系统'); setTimeout(() => { router.push('/dashboard'); }, 1500); loginLoading.value = false; }); }; // 处理第三方登录 const handleQQLogin = () => { ElMessage.info('QQ登录功能开发中...'); }; const handleWechatLogin = () => { ElMessage.info('微信登录功能开发中...'); }; // 处理忘记密码 const handleForgotPassword = () => { ElMessage.info('密码找回功能开发中...'); }; // 页面加载时检查是否有记住的密码 onMounted(() => { const savedEmail = localStorage.getItem('savedEmail'); const savedPassword = localStorage.getItem('savedPassword'); if (savedEmail && savedPassword) { loginForm.email = savedEmail; loginForm.password = savedPassword; loginForm.remember = true; } }); </script> <style scoped> /* 确保根元素占满屏幕 */ html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; } .login-container { min-width: 100vw; min-height: 100vh; background: linear-gradient(135deg, #e6f0ff, #f0f2ff); display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 20px; } .login-box { width: 100%; max-width: 400px; background: #fff; border-radius: 12px; padding: 40px 30px; box-shadow: 0 8px 24px rgba(0, 0, 255, 0.1); text-align: center; } .logo { width: 60px; height: 60px; background: #6b6df4; border-radius: 50%; color: #fff; line-height: 60px; font-size: 24px; margin: 0 auto 20px; } h2 { font-size: 24px; color: #333; margin-bottom: 8px; } .sub-title { font-size: 14px; color: #999; margin-bottom: 30px; } .el-input { --el-input-bg-color: #f8f9fe; --el-input-border-color: transparent; --el-input-hover-border-color: transparent; --el-input-focus-border-color: transparent; margin-bottom: 20px; } .login-btn { width: 100%; background: linear-gradient(90deg, #6b6df4, #8490ff); border: none; color: #fff; padding: 12px 0; border-radius: 8px; cursor: pointer; } .login-btn:hover { opacity: 0.9; } .social-login { margin-top: 30px; } .divider { display: flex; align-items: center; margin-bottom: 20px; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #eee; } .divider span { color: #999; font-size: 14px; padding: 0 15px; } .social-buttons { display: flex; justify-content: center; } .social-btn { color: #6b6df4; font-size: 20px; margin: 0 10px; } .extra-links { display: flex; justify-content: space-between; margin-top: 20px; font-size: 14px; } .extra-links a { color: #6b6df4; text-decoration: none; } .extra-links a:hover, .forgot-password:hover { text-decoration: underline; cursor: pointer; } .forgot-password { color: #6b6df4; } </style> 这个登录的vue组件为什么不能占满整个页面
最新发布
07-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值