我有以下问题:当我第一次选择两个框中的一个左边框缺失(谷歌Chrome 36);在我选择另一个之后,左边的边框出现了。JSFIDDLE:
http://jsfiddle.net/emrfcuu7/
观察编译代码后立即-当选择两个框中的一个时,左边框丢失;这是一个bug还是我做错了什么?
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,400,600,700,800);
.main {
position: relative;
background-color: #16A085;
width: 550px;
height: 350px;
}
.mainRibbon {
position: relative;
background-color: #ECF0F1;
width: 70%;
height: 60%;
margin: 0 auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 6px;
}
.textBoxStyle {
position: relative;
border: 1px solid rgba(26, 188, 156, 0);
border-radius: 4px;
width: 80%;
text-indent: 20px;
box-shadow: none;
-webkit-box-shadow: none;
line-height: 1.4285;
-webkit-transition: border-color .25s linear;
transition: border-color .25s linear;
margin: 6% 10% 0 10%;
padding-top: 6px;
padding-bottom: 6px;
}
.textBoxStyle:focus {
outline: 0;
border-color: rgba(26, 188, 156, 1);
}
.btnLogin {
background-color: #16A085;
width: 80%;
border-radius: 6px;
margin: 6% 10% 0 10%;
-webkit-transition: background .25s linear;
transition: background .25s linear;
}
.btnLogin:hover {
background-color: #1ABC9C;
cursor: pointer;
cursor: hand;
}
.btnLogin>p {
color: white;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
font-family: 'Open Sans';
-webkit-font-smoothing: subpixel-antialiased;
font-size: 17px;
text-align: center;
}
.icon {
position: absolute;
background: rgba(0, 0, 0, 0);
width: auto;
height: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon>p {
color: white;
font-size: 60px;
line-height: 60px;
padding: 0;
margin: 0;
}
/*de sters
.test{
position:relative;
background-color:blue;
width:80%;
height:30%;
top:50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}*/
<div class="main">
<div class="icon">
<p class="text icon"></p>
</div>
<div class="mainRibbon">
<input type="text" class="textBoxStyle" placeholder="Enter your username">
<input type="text" class="textBoxStyle" placeholder="Password">
<div class="btnLogin">
<p>Log in</p>
</div>
</div>
</div>
问题解决:问题是"left-margin"落在半像素上,因此无法显示;我把"宽度"从"。把" Main "从"550px"改为"560px",现在左边距显示完美了;
感谢所有建议设置"outline"样式以适合我的样式;这是一个很好的解决方案,只是轮廓不能像我想的那样有圆角。
我不知道它为什么这样做,但是当你将padding-left:1px
添加到.textBoxStyle
时,它解决了问题,但不是在任何时候,非常奇怪。
我还看到问题可能来自margin:6% 10% 0% 10%;
,也许没有足够的空间与这些边距的边界,你应该使用像素的边距
真正的解决方案:您必须从.textBoxStyle:focus
中删除outline:0
,并得到以下内容:
.textBoxStyle:focus{
border-color:rgba(26,188,156,1);
}
http://jsfiddle.net/emrfcuu7/7/给予border> 1px
.textBoxStyle{
position:relative;
border:2px solid rgba(26,188,156,0);
border-radius:4px;
width:80%;
text-indent:20px;
box-shadow:none;
-webkit-box-shadow:none;
line-height:1.4285;
-webkit-transition: border-color .25s linear;
transition: border-color .25s linear;
margin:6% 10% 0 10%;
padding-top:6px;
padding-bottom:6px;
}
如果移除了页边距,问题将无法重现。
margin:6% 10% 0 10%;
好好利用这段时间
.textBoxStyle:focus{
outline:none;
border:2px solid rgba(26,188,156,1);
}