Question

CSS的display:inline;之后也无法自适应内容

【html】
<span class="errorDialog errorMsgId"></span>
【CSS】
.popup .errorDialog{ display: none; position:absolute; line-height: 20px; max-width: 179px; background-color: #c9c9c9; border:1px solid #b0b0b0; -webkit-border-radius: 6px; border-radius: 6px; padding: 10px; font-size: 12px; color: #d83131;}
【JS】
showErrorMsg : function(Contaner,msg){ $(".errorDialog").css('display','none'); Contaner.html(msg); Contaner.fadeIn(300); Contaner.css('display','inline'); Contaner.prev().focus();},

我如果单独把这个运行，就没问题。可以自适应内容。整个运行就有问题。实在不知道为什么。求解
补充一下，已经找到问题，但是不知道怎么解决。

这个是posR的范围

这个是提示框 left: 183px;的情况

这个是提示框left:280px;的情况

这是提示框left:340px的情况。可见，当left大到一定值的时候，自适应的文字会被挤扁了出去。我不想让他被挤扁，怎么搞？
【html】
<div class="posR"> <input id="regEmail" type="email" class="popContent emails" placeholder="邮箱/手机号"> <div class="errorDialog errorMsgId"></div></div>
【css】
.posR {
position: relative;
}
.errorMsgId {
top: -10px;
left: 183px;
margin-left: 20px;
z-index: 2;
}





若以下回答无法解决问题，邀请你更新回答

Answer 1

为毛你要 inline？应该block

百度下搞懂inline的特点了来..

追问

我要自适应啊。block就得定宽了。

初步找到一点问题所在，

这里要是left:230的时候，显示就正确：

但是到330的时候，就挤扁了。

追答

嘿嘿，css你还没摸透。谁说block不能自适应？

if 你闲麻烦的话用 inline-block 试试(忽略ie低版本)或者inline-table之类的玩意..

想兼顾ie6之类的而且有求知欲的话可以百度下block怎么做自适应。

追问

不用兼顾低版本，就是这个压缩的问题，block，inline-block都试过了，都一样挤扁成一竖条才能出去。除非block设置最小宽度，也是压到最小宽度再出去Orz。inline-table或者table里面套个table-cell也试过，谷歌IE没问题，但是surface的高度又有不对了。唉。
所以要跟surface兼容，就得解决这个压缩的问题。

追答

代码打包发上来看看