ajax cotrol toolkitのコンボボックスがChromeで縦並びになってしまう

Question

visual web developer 2010 Expressを使用してWeb アプリケーションプロジェクトを作成しています。
環境は以下です。
WEBサーバ：Windows Server 2008 R2 Standard
SQLServer：microsoft SQL SERVER 2008 R2 Express版
IISのバージョン：Version7.5.7600.16385
.NET のバージョン：Microsoft .NET Framework 4
使用ブラウザ：IE,Firefox,Chrome（すべて最新バージョン）
使用言語：VB

ajax cotrol toolkitを使ってコンボボックスをいくつか配置しています。

IE,Firefoxではうまく表示されているのですが，
Chromeだと，コンボボックスを配置すると自動的に改行されてしまい？，
コンボボックスを横並びにできません。
（横幅はじゅうぶんあります。）

図で示すと

IE，Firefoxだと

□　□　□

と表示されているのが，Chromeだと

□
□
□

となってしまいます。

もし対処法があれば修正したいと思っています。

ちなみにコンボボックス部分のコードは以下のようになっています。

<cc1:ComboBox ID="cmbtanto" runat="server" Width="50px" Height="16px" DataSourceID="SqlDataSource6"
            DataTextField="AAA" DataValueField="AAA" MaxLength="0"
            style="display: inline;" AutoCompleteMode="SuggestAppend"
            ItemInsertLocation="Prepend" AppendDataBoundItems="True">
            <asp:ListItem></asp:ListItem>
        </cc1:ComboBox>　　　（←全角スペースをふたつ配置してます）
<cc1:ComboBox ID="cmbkakudo" runat="server" Width="50px" Height="16px" DataSourceID="SqlDataSource7"
            DataTextField="BBB" DataValueField="BBB" MaxLength="0"
            style="display: inline;" AutoCompleteMode="SuggestAppend"
            ItemInsertLocation="Prepend" AppendDataBoundItems="True">
            <asp:ListItem></asp:ListItem>
        </cc1:ComboBox>　　（←全角スペースをふたつ配置してます）
<cc1:ComboBox ID="cmbshojyo" runat="server" Width="150px" Height="16px" DataSourceID="SqlDataSource5"
            DataTextField="CCC" DataValueField="CCC" MaxLength="0"
            style="display: inline;" AutoCompleteMode="SuggestAppend"
            ItemInsertLocation="Prepend" AppendDataBoundItems="True">
        </cc1:ComboBox>

”（←全角スペースをふたつ配置してます）”
とありますが，
スペースを除いても縦並びのままです。

お気づきの点ありましたら教えていただけますでしょうか。
よろしくお願いいたします。

Answer 1

生成される html ソースコードを見て、Chrome と他でどう違うか見比べて、その結果を書いていただけませんか？

Chrome のバージョンは 34.0.1847.137 m ですか？　違う場合はそれも書いてください。

Answer 2

いつもありがとうございます！

生成されるソースコードがブラウザによって変わるのですね。
知らなかったです。

Chromeのバージョンは34.0.1847.137 mです。

visual web developerで，ブラウザでプレビューし，
IEとChromeのhtmlソースを見てみました。

AAA：□  BBB：□

となっている部分です。Chromeだと
AAA:
□
BBB：
□
となってしまいます。


【IE】
        AAA：<div id="MainContent_cmbAAA" style="display:inline;">
    <table id="MainContent_cmbAAA_cmbAAA_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;;top:5px;">
        <tr>
            <td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$cmbAAA$cmbAAA_TextBox" type="text" maxlength="1" id="MainContent_cmbAAA_cmbAAA_TextBox" autocomplete="off" style="height:16px;width:50px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_cmbAAA_cmbAAA_Button" type="button"></button></td>
        </tr>
    </table><ul id="MainContent_cmbAAA_cmbAAA_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
        <li>b</li><li>c</li><li>f</li><li>fc</li><li>g</li><li>gb</li><li>gc</li><li>h</li><li>i</li><li>k</li><li>kg</li><li>m</li><li>ng</li><li>y</li>
    </ul><input type="hidden" name="ctl00$MainContent$cmbAAA$cmbAAA_HiddenField" id="MainContent_cmbAAA_cmbAAA_HiddenField" value="-1" />
</div>　　（←全角スペースふたつ）
        BBB：<div id="MainContent_cmbBBB" style="display:inline;">
    <table id="MainContent_cmbBBB_cmbBBB_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;;top:5px;">
        <tr>
            <td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$cmbBBB$cmbBBB_TextBox" type="text" maxlength="1" id="MainContent_cmbBBB_cmbBBB_TextBox" autocomplete="off" style="height:16px;width:50px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_cmbBBB_cmbBBB_Button" type="button"></button></td>
        </tr>
    </table><ul id="MainContent_cmbBBB_cmbBBB_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
        <li></li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
    </ul><input type="hidden" name="ctl00$MainContent$cmbBBB$cmbBBB_HiddenField" id="MainContent_cmbBBB_cmbBBB_HiddenField" value="-1" />
</div>　　（←全角スペースふたつ）

【Chrome】
        AAA：<div id="MainContent_cmbAAA" style="display:inline;">
    <table id="MainContent_cmbAAA_cmbAAA_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;;top:5px;">
        <tr>
            <td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$cmbAAA$cmbAAA_TextBox" type="text" maxlength="1" id="MainContent_cmbAAA_cmbAAA_TextBox" autocomplete="off" style="height:16px;width:50px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_cmbAAA_cmbAAA_Button" type="button"></button></td>
        </tr>
    </table><ul id="MainContent_cmbAAA_cmbAAA_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
        <li>b</li><li>c</li><li>f</li><li>fc</li><li>g</li><li>gb</li><li>gc</li><li>h</li><li>i</li><li>k</li><li>kg</li><li>m</li><li>ng</li><li>y</li>
    </ul><input type="hidden" name="ctl00$MainContent$cmbAAA$cmbAAA_HiddenField" id="MainContent_cmbAAA_cmbAAA_HiddenField" value="-1" />
</div>　　（←全角スペースふたつ）
        BBB：<div id="MainContent_cmbBBB" style="display:inline;">
    <table id="MainContent_cmbBBB_cmbBBB_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;;top:5px;">
        <tr>
            <td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$cmbBBB$cmbBBB_TextBox" type="text" maxlength="1" id="MainContent_cmbBBB_cmbBBB_TextBox" autocomplete="off" style="height:16px;width:50px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_cmbBBB_cmbBBB_Button" type="button"></button></td>
        </tr>
    </table><ul id="MainContent_cmbBBB_cmbBBB_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
        <li></li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
    </ul><input type="hidden" name="ctl00$MainContent$cmbBBB$cmbBBB_HiddenField" id="MainContent_cmbBBB_cmbBBB_HiddenField" value="-1" />
</div>　　（←全角スペースふたつ）

見落としがあったら大変申し訳ないのですが，違いがないように思います。

またお気づきの点ありましたら教えてください。お願いいたします。

Answer 3

ぜひDOCTYPEも

Answer 4

かるあ 様

ありがとうございます！
失礼しました。DOCUTYPE以下です。

【IE】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

【Chrome】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


引き続きよろしくお願いいたします！

Answer 5

どう違うかを見比べるのは、回答者がやるのではなくて、質問者さんにお願いしたいんですが・・・

見比べるのは大変なので、とりあえずの対症療法ですが table を使ってみてはどうですか？　以下のような感じです。

<table>
  <tr>
    <td>
      <asp:ComboBox ID="ComboBox1" ...>
      </asp:ComboBox>
    </td>
    <td>
      <asp:ComboBox ID="ComboBox2" ...>
      </asp:ComboBox>
    </td>
    <td>
      <asp:ComboBox ID="ComboBox3" ...>
      </asp:ComboBox>
    </td>
  </tr>
</table>

【PS】

表題の Chromed を Chrome に訂正していただくようお願いします。

Answer 6

Hoshinaです
こんにちは

このような場合の常道は，可能な限り単純な書式にしてみることだと思います。

・要素が三つで試されているようですが，これを二つにしてみる
・javascriptやCSSも，可能な限り無くしてみる

そこで，SurferOnWwwさんのアドバイスと同様になりますが，

・HTMLの<table>タグを１つだけ使用して
　（投稿された内容では，複数の<table>タグを使用しているので）
・要素が二つで試す
・それ以外の要素は外す

まず，この条件で試されてはどうですか？
きちんと表示されている状態からスタートしないと，中々原因が分からないと思います。

可能な限り単純にしても，現象が再現できる場合，そのHTMLはかなり短くなっているでしょうから，そのまま投稿して，有志の方に再現の有無の確認をお願いできる可能性があると思います。

それでは

Answer 7

SurferOnWww 様

ありがとうございます！

>どう違うかを見比べるのは、回答者がやるのではなくて、質問者さんにお願いしたいんですが・・・

大変失礼しました。

教えていただいたようにテーブルで囲んだらchromeでも無事に横並びになりました！
これですべてのブラウザで見え方が同じになりました！
本当にありがとうございました！

Answer 8

すでに解決しているので、参考までに

どうもchromeと他のブラウザーで、tableタグのdisplay:inlineに対する挙動が違うのが問題っぽいです。

ACTのコンボボックスのスタイルはインラインで書かれているので、css側からいじるのはちょっとむずかしいですね。

もしtableレイアウトを使わない場合は、Javascriptで実行時にどうにかすればいけるかな。こんな感じ？

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript">
  $(function($) {
    $(".ajax__combobox_inputcontainer").css("display", "inline-table");
  })($);
</script>

Answer 9

Hoshina 様

ありがとうございます！
相変わらず質問のしかたがへたくそで申し訳ありません。
可能な限り単純にしてみたつもりなのですが，全然だめですね。
長々とコードを記載してしまいご迷惑おかけしました。
自分でも色々検証していけるよう努力します。

かるあ 様

ありがとうございます！
いただいたjavascript週明けためしてみます！
ありがとうございました！