div块中选择的块大小错误（Chrome，Safari）

Question

实施例：

＆＃13;

＆＃13;

select {
  max-width: 40px;
}

＆＃13;

<div contenteditable="true">
  text text text text text
  <select>
    <option>bigbigbigbigbigbigbig</option>
  </select> text text text text text text text
</div>

＆＃13;

＆＃13;

＆＃13;

在Chrome中选择块高（Screenshot1） - 不好。

在Firefox中选择块高（Screenshot2） - 很好。

如何解决这个问题？

Answer 1

问题的解决方案：

select {
  max-width: 40px;
  word-wrap: normal;
}

或

select {
  max-width: 40px;
  vertical-align:top;
}

Answer 2

试试这个。将你的文字换成span并给它vertical-align：top。 DEMO：https://jsfiddle.net/84o8bbb7/

<强> HTML

<div contenteditable="true">
    <span>text text text text text</span>
  <select>
    <option>bigbigbigbigbigbigbig</option>
    </select><span> text text text text text text text</span>
</div>

<强> CSS

select {
  max-width: 40px;
}
span{
    display:inline-block;
    vertical-align:top;
}